Cara Membuat Accordion Vallenato Pada Blog

Halo sob...

Kali ini postingannya mengenai blogging lagi, yakni membuat accordion vallenato setelah sebelumnya saya share mengenai cara membuat menu dropdown horizontal melayang...

Apa itu accordion vallenato?? Lihat saja sendiri sob, di menu sidebar saya ya seperti itulah accordion vallenato, hehehe... Menu ini sendiri menurut saya sangat bermanfaat terutama untuk blog dengan 2 kolom yang ingin tampilan sidebar nya tidak terlalu jauh ke bawah meskipun tetap memuat berbagai widget yang diinginkan.

Saya sendiri mengetahui dan mempelajari accordion vallenato dari blog sahabat Kolom-Tutorial (makasih sob...) yang kemudian sedikit saya kustomisasi agar pas dengan blog saya ini.

Ok, langsung saja kita praktekkan caranya sob...

1. Login dulu ke blogger.

2.Pilih Template - Edit HTML.

3. Centang "Expand Template Widget".

4. Cari kode ]]></b:skin> dan kemudian letakkan kode berikut tepat diatasnya :

#accordion-container {
font-size:12px;
background:none;
padding:2px 4px 4px 4px;
border:1px solid #cccccc;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
-moz-box-shadow:0 5px 15px #cccccc;
-webkit-box-shadow:0 5px 15px #cccccc;
box-shadow:0 5px 15px #cccccc;
}

.accordion-header {
font-size:14px;
background:#ebebeb;
margin:5px 0 0 0;
padding:2px 5px;
border:1px solid #cccccc;
cursor:pointer;
color:#666666;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
}

.active-header {
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXY57go7zNpxrLkQMXnjR_EwfRE0CzOm5-n1d633x9epfICLv1DeV3CiZyMBf3NsZmyZyrY-KPNARqsDnWA3hCC3P8NjvUB-5w56U_bXsBc4fzDz-AvhC06sm_V-JnG2FiPFApaeGJ3_m/s1600/active-header.gif) #cef98d;
background-repeat:no-repeat;
background-position:right 50%;
}

.active-header:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXY57go7zNpxrLkQMXnjR_EwfRE0CzOm5-n1d633x9epfICLv1DeV3CiZyMBf3NsZmyZyrY-KPNARqsDnWA3hCC3P8NjvUB-5w56U_bXsBc4fzDz-AvhC06sm_V-JnG2FiPFApaeGJ3_m/s1600/active-header.gif) #c6f089;
background-repeat:no-repeat;
background-position:right 50%;
}

.inactive-header {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DT_NipUj-eeIxLQhUDo-gAZnRxq7Pqgez_Q_CM62VubF1lXFfY6BOeW0CnXDdEQfo49GSP2Nb0OOkrsbZCxZOjhzrkdRCfQSMvteW_4Og8basBJvHjIEwJdfwFpXEv3CBtAvc9cxn3hu/s1600/inactive-header.gif) #ebebeb;
background-repeat:no-repeat;
background-position:right 50%;
}

.inactive-header:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DT_NipUj-eeIxLQhUDo-gAZnRxq7Pqgez_Q_CM62VubF1lXFfY6BOeW0CnXDdEQfo49GSP2Nb0OOkrsbZCxZOjhzrkdRCfQSMvteW_4Og8basBJvHjIEwJdfwFpXEv3CBtAvc9cxn3hu/s1600/inactive-header.gif) #f5f5f5;
background-repeat:no-repeat;
background-position:right 50%;
}

.accordion-content {
display:none;
padding:5px;
background:#FEE6BF;
border:1px solid #cccccc;
border-top:0;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}

5. Cari kode </head> dan letakkan kode berikut tepat diatasnya :

<script src='http://joens-tutorial.googlecode.com/files/vallenato.js' type='text/javascript'/>

6. Simpan Template.

7 Sekarang balik ke menu awal dan pilih Tata Letak - Tambahkan Widget - HTML/Javascript.

8. Masukkan kode berikut ini :

<div id="accordion-container">
     <h2 class="accordion-header">Judul Widget Anda</h2>
     <div class="accordion-content">
          <p>Kode Widget Anda</p>
     </div>
     <h2 class="accordion-header">Judul Widget Anda</h2>
     <div class="accordion-content">
          <p>Kode Widget Anda</p>
     </div>
     <h2 class="accordion-header">Judul Widget Anda</h2>
     <div class="accordion-content">
          <p>Kode Widget Anda</p>
     </div>
    </div>

9. Simpan.

10. Enjoy.

Keterangan :

* Silahkan temen-temen berkreasi dengan warna misalnya untuk background pada kode di langkah 4.
* Silahkan tambahkan jumlah widget yang diinginkan sesuai kebutuhan dengan menambah kode berikut
diantara kode <div id="accordion-container"> dan </div>