contoh desain accordion dapat sobat lihat DISINI
langsung deh saya jelaskan langkah-langkahnya
- Login akun blogger sobat.
- Untuk Blog desain lama sebagai berikut.
1.Klik "Rancangan"
2.Pilih tab "Edit HTML"
- Untuk Blog desain baru sebagai berikut.
1. pada menu navbar blog sobat klik "Desain"
2. pilih "template"
3. pilih "Edit HTML"
- Jangan pernah lupa sobat untuk selalu memback up data HTML sobat setiap melakukan perubahan
- Centang "Expand Widget Templates" - Cari kode yang mirip dengan kode ini :
</head>
- Kemudian sobat copy kode dibawah ini dan letakkan tepat diatas kode </head>
<style type='text/css'>
/*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */
ul.accordion li.bg1{
background:transparent;
}
ul.accordion li.bg2{
background:transparent;
}
ul.accordion li.bg3{
background:transparent;
}
ul.accordion li.bg4{
background:transparent;
}
ul.accordion li.bg5{
background:transparent;
}
</style>
<style type='text/css'>
/*widget Fitur Slide Accordion by noer <a href='http://www.carabuatwebgratis.com/'/>*/
.ElegantAccordion{
position:relative;
width:980px;
height:385px;
margin:auto;
overflow:hidden;
background-color:#000;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgBfkR93j4TqbGaC-F0Eg7DYka6qwUMHBmlJ1-Jh1qyUFkCpWUYMOGK0bCQv-heZJ5G4Gh1eyKrfRu_gQtMbEw5GzRkeOE3SQsE1rJSayrE-WGPYMgG-0n68W4-orG9Po_VHnzIxEcSM/s1600/logo.png) no-repeat;
background-repeat:no-repeat;
background-position:50% 50%;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px 4px 4px 4px;
border: 7px outset #ffd966;
}
.titel-ElegantAccordion{
display: block;
position:absolute;
width:100%;
height:80px;
top:0px;
float: left;
font-size:100px;
font-family:Arial, Helvetica, Sans-serif;
font-weight:normal;
color:#B85BED;
line-height:80%;
padding:30px 20px;
cursor:pointer;
text-shadow:4px 1px 1px #000;
text-decoration:none;
color:#FFBA00;
z-index:999999;
}
.titel-ElegantAccordion a:link {
color:#ddd;
text-decoration:none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.titel-ElegantAccordion a:visited {
color:#339025;
text-decoration:none;
}
.titel-ElegantAccordion a:hover {
color:#C3E9A4;
text-decoration:none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.reference{
clear:both;
top:150px;
left:10px;
position:absolute;
text-align:left;
font-size:10px;
font-family: Cambria, serif;
font-weight:bold;
line-height: 1em;
width:250px;
padding:0px 20px 5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOUwK102T9mO2UI6g96Q1lz91VnGvVOnEewA_0QEXo95lsNLTl6Kp8B1lEsXwqiumULZ5xoDHoSXxEh7deTU0P1rGWPUHE3N3xdnC-CPOAkkrX-MDWkP1GOc_OKv4uQKE_oPdT8jGpvQ/s1600/vvv.jpg)no-repeat fixed;
border: 5px outset #ffd966;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#ffffff;
text-decoration:none;
font-size:14px;
font-family: Cambria, serif;
line-height: 1em;
}
.reference p a:hover{color:#347D29;}
ul.accordion{
list-style:none;
position:absolute;
right:0px;
top:0px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li{
float:right;
width:115px;
height:380px;
display:block;
border-right:2px solid #ffd966;
border-bottom:2px solid #ffd966;
background-color:#000000;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
ul.accordion li:hover{
float:right;
width:400px;
height:380px;
display:block;
border-right:2px solid #ffd966;
border-bottom:2px solid #ffd966;
background-color #000000;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
}
ul.accordion li.bleft{
border-left:2px solid #000000;
}
ul.accordion li .heading{
background: -moz-linear-gradient(
top,
#140202 0%,
#c20606 25%,
#c71818 74%,
#700e0e 72%,
#140101);
background: -webkit-gradient(
linear, left top, left bottom,
from(#140202),
color-stop(0.25, #c20606),
color-stop(0.74, #c71818),
color-stop(0.72, #700e0e),
to(#140101));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 0px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(247,239,239,0.5),
inset 0px 0px 1px rgba(242,239,239,1);
-webkit-box-shadow:
0px 3px 11px rgba(247,239,239,0.5),
inset 0px 0px 1px rgba(242,239,239,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
padding:10px;
margin-top:325px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:14px;
color:#ffffff;
text-align:center;
text-shadow:-1px 1px 1px #ffffff;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
ul.accordion li:hover .heading{
background: -moz-linear-gradient(
top,
#140202 0%,
#c20606 25%,
#c71818 74%,
#700e0e 72%,
#140101);
background: -webkit-gradient(
linear, left top, left bottom,
from(#140202),
color-stop(0.25, #c20606),
color-stop(0.74, #c71818),
color-stop(0.72, #700e0e),
to(#140101));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 0px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(247,239,239,0.5),
inset 0px 0px 1px rgba(242,239,239,1);
-webkit-box-shadow:
0px 3px 11px rgba(247,239,239,0.5),
inset 0px 0px 1px rgba(242,239,239,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
padding:10px;
margin-top:-50px;
}
ul.accordion li .description{
position:absolute;
width:300px;
height:1px;
bottom:2px;
left:0px;
display:blok;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
}
ul.accordion li:hover .description{
position:absolute;
width:300px;
height:240px;
bottom:0px;
color:#000000;
left:0px;
display:blok;
}
ul.accordion li .description .pengantar{
float:left;
width:150px;
height:300px;
margin-right:0px;
padding-rightt:10px;
bottom:40px;
}
ul.accordion li .description .daftar{
float:left;
width:290px;
height:180px;
margin-left:5px;
margin-right:2px;
bottom:40px;
padding-right:2px;
padding-left:5px;
overflow:auto;
border:2px solid #ccc;
border-radius: 5px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOoz6rTxN-LvPtUHK2uBaTf2-DCg4Qf5_3agUqpzI6fMn2E0yPHKPAiO24e2qDHipVIBL_QaIla52xO8gupw1rqsm7HQ_62lEA9-MPAwPY7GUdY6UM-HDLQty2uhQcySVnCrpDxOBuCsxX/s200/bgDescription.png) repeat-x top left;
}
ul.accordion li .description .daftar a.menu{
display:block;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
font-size:13px;
color:#000000;
padding:5px;
margin-right:5px;
text-align:left;
text-decoration:none;
line-height:12px;
border-bottom:1px solid #ccc;
}
ul.accordion li .description .daftar a.menu:hover{
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:13px;
color:#000000;
text-align:left;
text-decoration:none;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8txKBDl2g1oASvvtH3z6niz5xcJprumxD5wDDp6SJwJ4C3KXJFeOFuHO8LUQeSCmOaF7W__ye7LGFXmgiUSiuqTFJyrr_K10xpaB2JAT51olZ_FKgqOQ7DxuI3W_4fKRDi2D8OkzM48/h1600/bg_biru_9.png)bottom repeat-x;
}
ul.accordion li .description h2{
float:left;
width:200px;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:20px;
color:#e6900e;
text-align:left;
padding-left:10px;
padding-right:10px;
text-shadow:1px 2px 1px #000;
}
ul.accordion li .description p{
float:left;
width:200px;
margin-left:10px;
margin-top: 0px;
font-family: Segoe Print, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a.more{
margin-left:100px;
margin-top:10px;
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#e6900e;
}
ul.accordion li .description a.more:hover{
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#333;
font-weight: bold;
}
ul.accordion li .bgDescription{
background:#000000;
height:1px;
position:absolute;
bottom:-20px;
left:0px;
width:100%;
display:blok;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
ul.accordion li:hover .bgDescription{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOoz6rTxN-LvPtUHK2uBaTf2-DCg4Qf5_3agUqpzI6fMn2E0yPHKPAiO24e2qDHipVIBL_QaIla52xO8gupw1rqsm7HQ_62lEA9-MPAwPY7GUdY6UM-HDLQty2uhQcySVnCrpDxOBuCsxX/s500/bgDescription.png) repeat-x top left;
height:270px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
display:blok;
}
</style>
NB: Teks { background:transparent; } adalah latar gambar yang akan muncul di menu, silahkan anda ganti sesuai dengan URL gambar yang sobat inginkan.
- Simpan template baru sobat
- Kemudian sobat tinggal masukkan kode dibawah ini pada gadget HTML dibawah header blog sobat, ini langkahnya:
a. pada blog desain lama
1. pilih "Rancangan" kemudian pilih "Elemen laman"
2. pilih tambah Gadget
3. pada jendela baru pilih Gadget HTML
b. pada blog desain baru
1. pilih "Desain" pada tampilan blog sobat
2. pilih "Tata letak"
3. klik tambah gadget dan pada jendela baru pilih gadget HTML
c. copy kode dibawah ini lalu pastekan pada gadget yang sobat pilih tadi:
<div class="ElegantAccordion">
<div class="titel-ElegantAccordion">
<a href="http://planet-sagitarium.blogspot.com/"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMAxdr1ldEZFZvjFBJiIvh6GVGZuoBxKj4S4ZAPBzbBacjZoKzZyEAe3jaB69QAWRYTTkViMYtU1aVetAtaQlVQJJrcA4tsrs78n-ZlQmvhm1x6Ca_RUP4Jd0JfpW0CkWq2y9DDjwB4Q/s1600/judul.png'/></a>
</div>
<div id="content">
<div class="title"></div>
<div class="reference">
<p><a href="http://planet-sagitarium.blogspot.com/">BERANDA</a></p>
<p><a target="_blank" href="http://planet-sagitarium.blogspot.com/2012/12/imgr-new-arrayimgr0-httpi43.html">POST TERBARU</a></p>
<p><a target="_blank" href="http://www.blogger.com/profile/08675715027266128446">PROFIL ADMIN</a></p>
<p><a target="_blank" href="http://kandangbus.blogspot.com/">BLOG TERKAIT</a></p>
</div>
<ul class="accordion" id="accordion">
<li class="bg1">
<div class="heading">LAIN-LAIN</div>
<div class="bgDescription"></div>
<div class="description">
<h2>LAIN-LAIN</h2>
<div class="daftar">
</div>
</div>
</li>
<li class="bg2">
<div class="heading">AKTIFITAS</div>
<div class="bgDescription"></div>
<div class="description">
<h2>AKTIFITAS</h2>
<div class="daftar">
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Refreshing">Refreshing<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Hunting">Hunting Foto<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Kuliah">Kuliah<hr/></a>
</div>
</div>
</li>
<li class="bg3">
<div class="heading">TIPS n TRIK</div>
<div class="bgDescription"></div>
<div class="description">
<h2>TIPS n TRIK</h2>
<div class="daftar">
<a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/artikel-komputer-httpartikelkomputerku.html">Blogging<hr/></a>
<a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-membuat-menu-di-blog.html">Komputer<hr/></a>
<a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-memper-cantik-blog.html">Corel Draw<hr/></a>
<a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-memper-cantik-blog.html">Photoshop<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Peternakan">Peternakan<hr/></a>
</div>
</div>
</li>
<li class="bg4">
<div class="heading">INFO+</div>
<div class="bgDescription"></div>
<div class="description">
<h2>INFO+</h2>
<div class="daftar">
<a target="_blank" href="http://planet-sagitarium.blogspot.com/2011/12/tampilan-terbaru-t-shirt-puspa-jaya.html">Kaos Puspa Jaya<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/2011/12/pesona-pantai-dibagian-barat-propinsi.html">Pantai Tanjung Setia<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/2011/12/fakta-tentang-kucing.html">Fakta Kucing<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/2011/11/komodo-resmi-masuk-new-7-wonder.html">Komodo 7 wonder<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/2011/08/tarif-lebaran-bis-akap-puspa-jaya-2011.html">Tarif Puspa Jaya Lebaran 2012<hr/></a>
</div>
</div>
</li>
<li class="bg5">
<div class="heading">BUS n Me</div>
<div class="bgDescription"></div>
<div class="description">
<h2>BUS n Me</h2>
<div class="daftar">
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Chassis ">CHASSIS BUS<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Gallery%20Bus ">FOTO BUS<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Desain%20Bus ">DESAIN BUS<hr/></a>
<a target="_blank" href="http://planet-sagitarium.blogspot.com/search/label/Reservasi ">RESERVASI<hr/></a>
</div></div></li></ul></div>
</div>
NB:
1. Ganti teks yang berwarna biru dengan alamat blog anda, sedangkan teks yang berwarna kuning adalah judul dari blog anda.
2. Untuk teks yang berwarna merah ganti ULR artikel anda. dan seterusnya.
d. Simpan dan Sobat lihat hasilnya
'Happy blogging sobat semua"
