Home » » Cara Membuat Sidebar Akordion di Blogspot

Cara Membuat Sidebar Akordion di Blogspot

Cara Membuat Sidebar Akordion di Blogspot
Cara Membuat Sidebar Akordion di Blogspot

SIDEBAR Akordion adalah widget sidebar blog yang hanya akan muncul jika diklik. Demonya bisa dilihat di sidebar Webmaster CB.

Tips Cara Membuat Sidebar Akordion di Blogspot ini dibagikan msater desain blog DTE. Tutor dan demo lainnya juga bisa dilihat di sana.

Cara Membuat Sidebar Akordion di Blogspot

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode < head >

<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Kode warna merah (sidebar-wrapper) adalah kode HTML sidebar blog pada umumnya.

Jika gagal, mungkin saja template Anda nama sidebar-wrapper-nya berbeda, misalnya sidebar saja atau ada tambahan lain. Nah, ganti dengan kode sidebar yang sama dengan yang ada di template Anda.

3. Save template!

Beres!

Sidebar Accordion ini pula yang digunakan Creating Website pada template yang super seo friendly Johny Wusss yang sudah CB modif dan bagi gratis di Johny Wuss Series.

Pastikan Anda memunculkan 3-4 widget di sidebar agar fungsi blogger accordion sidebar terlihat dengan baik seperti pada contoh. Good Luck! (http://www.contohblog.com/).*

Thanks for reading & sharing Cara Membuat Sidebar Akordion di Blogspot

Previous
« Prev Post

5 comments:

Comment Page:
  1. widget akordion ini kalau tidak salah ada juga di New Johny Wuss versinya maskolis.

    ReplyDelete
    Replies
    1. Lha... apanan begitu kata CB juga di akhir posting :)

      Delete
    2. Oh iya mas.. Sorry gak kebaca bagian itu :D

      Delete
  2. Kenapa blog webmastercb dihapus?dan kalau terhapus apa penyebabnya.saya cek score seonya 100%.mohon infonya

    ReplyDelete
    Replies
    1. cb mah sering ganti-ganti blog demo, itu blog demo, buat modif template biasanya... nanti juga ada lagi :)

      Delete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox