Membuat Accordion Vallenato

Happy Blogging sobat, beberapa hari yang lalu salah satu sobat ane bernama mas Rizqi dalam sebuah chat menanyakan tentang bagaimana membuat sebuah Accordion yang digunakan Blog Kolom Tutorial™ atau yang ada di samping :

Insya Allah pada kesempatan ini Kolom Tutorial™ akan mencoba menjawab pertanyaan tersebut, Trik ini bernanma Membuat Accordion Vallenato, hehhehheh .........
Baiklah sobat Blogger untuk tutornya monggo dsimak :

1. Seperti biasa Login ke Akun Blogger sobat
2. Klik Tata Letak >>> Add widget
3. Klik HTML/Javascript Copy Paste Kode ddibawah ini :

 <div id="accordion-container">

     <h2 class="accordion-header">Judul Widget Disisni</h2>
     <div class="accordion-content">
          <p>Conten/code widget</p>
     </div>

     <h2 class="accordion-header">Judul Widget Disisni</h2>
     <div class="accordion-content">
          <p>Conten/code widget</p>
     </div>

     <h2 class="accordion-header">Judul Widget Disisni</h2>
     <div class="accordion-content">
          <p>Conten/code widget</p>
     </div>

     <h2 class="accordion-header">Judul Widget Disisni</h2>
     <div class="accordion-content">
          <p>Conten/code widget</p>
     </div>

     <h2 class="accordion-header">Judul Widget Disisni</h2>
     <div class="accordion-content">
          <p>Conten/code widget</p>
     </div>

</div>

4. Klilk Save
5. Klik Template Klik Edit HTML
6. Jangan Lupa Centang Expand Widget Template

7. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

 #accordion-container {
  font-size:12px;
  background:#000000;
  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/AVvXsEiVB-tiEj0VVVVFPVdGFMWdZWsVUY922f2hzux48vMnyMHk1aBpbzXkh7BsyHcm-1DHnFfL5eIsOGpc-ENAVVEslVKXOshvbHa9axDK2jsBE_IYgHwJLtcMtBDdZtoLrrLk3_pLH-v5k_tM/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/AVvXsEiVB-tiEj0VVVVFPVdGFMWdZWsVUY922f2hzux48vMnyMHk1aBpbzXkh7BsyHcm-1DHnFfL5eIsOGpc-ENAVVEslVKXOshvbHa9axDK2jsBE_IYgHwJLtcMtBDdZtoLrrLk3_pLH-v5k_tM/s1600/active-header.gif) #c6f089;
  background-repeat:no-repeat;
  background-position:right 50%;
}

.inactive-header {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-wBr4XvQ1-zgsk4e8NwI0fkOfqYTVegSQAFQcoI81DoKXDu89alADvpVUHVrvoyVvtQDh-7jqmQYfCBWdNieN01NeIPC4DuckhQKFlOlE6Nf84bAaRoWzEhOvAnDNVBJT1FDQnA9JDf0/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/AVvXsEic-wBr4XvQ1-zgsk4e8NwI0fkOfqYTVegSQAFQcoI81DoKXDu89alADvpVUHVrvoyVvtQDh-7jqmQYfCBWdNieN01NeIPC4DuckhQKFlOlE6Nf84bAaRoWzEhOvAnDNVBJT1FDQnA9JDf0/s1600/inactive-header.gif) #f5f5f5;
  background-repeat:no-repeat;
  background-position:right 50%;
}

.accordion-content {
  display:none;
  padding:5px;
  background:#212121;
  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;
}

8. Kemudian Cari kode </head> kalau sudah ketemu letakan kode JS dibawah ini tepat di atas kode </head>, ini kodenya :

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

9. Klik Savedan lihat hasilnya,

Ok sob sekian artikel tentang bagaimana Membuat Accordion Vallenato Ala Kolom Tutorial™, happy blogging and have anice day...............!!!