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(http://4.bp.blogspot.com/-zvxDrKNrzAY/UPEt-qDjL6I/AAAAAAAAA0A/NmiN4ipZrzI/s1600/active-header.gif) #cef98d;
  background-repeat:no-repeat;
  background-position:right 50%;
}

.active-header:hover {
  background:url(http://4.bp.blogspot.com/-zvxDrKNrzAY/UPEt-qDjL6I/AAAAAAAAA0A/NmiN4ipZrzI/s1600/active-header.gif) #c6f089;
  background-repeat:no-repeat;
  background-position:right 50%;
}

.inactive-header {
  background:url(http://1.bp.blogspot.com/-7-J0X6JKtBs/UPEt-0imK3I/AAAAAAAAA0E/7r97BuR-RfM/s1600/inactive-header.gif) #ebebeb;
  background-repeat:no-repeat;
  background-position:right 50%;
}

.inactive-header:hover {
  background:url(http://1.bp.blogspot.com/-7-J0X6JKtBs/UPEt-0imK3I/AAAAAAAAA0E/7r97BuR-RfM/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...............!!!

Berlangganan update artikel terbaru via email:

28 Responses to "Membuat Accordion Vallenato"

  1. wah ...keren yah kalau bisa di kasih ini. cocok utk blog yg memiliki 2 kolom

    ReplyDelete
  2. Replies
    1. Mizz, ini ana pake silakan aja di rasakan efeknya, hehhehehheh

      Delete
  3. met pgi mas wah trmksih,ni mas infonya

    ReplyDelete
    Replies
    1. Pagi juga sob. sama2 mas thank atas kunjungannya

      Delete
  4. ssippp gan bisa di pratekan langsung

    ReplyDelete
  5. wuiiiih keren banget nih sobat tutornya,,makasih yah sudah berbagi

    ReplyDelete
  6. Thanks tutornya mas alex ane dah coba tampilannya mantap walaupun di tempat ane blum sempurna tapi tar ku edit2 lagi biar sesuai dgn tamplatenya. tapi untuk meletakkan kode tapi untuk meletakkan kode KOMENTAR TOP 10 ditempat ane kok gak berfungsi ya mas, mohon pencerahannya mas

    ReplyDelete
    Replies
    1. Sebelumnya maaf ni ya mas. saya juga masih belajar.
      Coba mas tempatkan dulu Widget Top Komentator Di tempat baru alias tidak disatukan dulu dengan accordion Vallenato. kalau berhasil berarti ada yang salah di accordion vallenato ( penempatan widgetnya).

      Delete
  7. widget ini bisa dipasang di laman nggak sob?

    ReplyDelete
  8. pagi ..sip gan tutornya .. lainkali di coba mantap neh

    ReplyDelete
    Replies
    1. pagi juga sobat, silakan gan, makasih kunjungannya

      Delete
  9. Wiih widget yg bagus gan :)

    ReplyDelete
  10. Semakin canggih aja sobat blognya.Terima kasih atas ilmu baru kawan

    ReplyDelete
    Replies
    1. @mas abdul,
      biasa aja ah, terimakasih atas kunjungannya. sukses selalu mas.

      Delete
  11. Bagus banget menu accordion nya mas! Saya paling suka di bagian scrollbar nya.. saya kira tadi kalau menu yang isi nya panjang, menu nya jadi ikut memanjang ke bawah. Ternyata otomatis membuat scrollbar, jadi tetep gak makan tempat! GREAT accordion mas :)

    ReplyDelete
  12. ooh ini yg seperti tanpa klik langsung muncul ya kang?

    ReplyDelete
    Replies
    1. yang paling atas iya mas, tapi yang selanjutnya harus klik juga mas.

      Delete
  13. .: Bisa buat modifikasi lay out kalo sudang boring...^_^

    ReplyDelete
    Replies
    1. Iya mas kurang lebih begitu, terimakasih banyak atas kunjungannnya

      Delete
  14. Mantef nih bang Alex ntar aku sedot buat ditancepin di blog yang satunya..hahhahyyy

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel