May 30, 2013

Membuat Sidebar Accordion Pada Blog



Selamat siang...

Mungkin sudah biasa melihat sidebar accordion yang kebanyakan dibuat dalam satu widget "HTML/Javascript", seperti dalam postingan saya dulu. Hanya, kekurangannya mungkin dalam menu accordion tersebut kita hanya dapat memasukkan widget-widget tertentu, namun untuk widget bawaan, seperti follower, popular post, dan arsip blog tidak dapat masuk dalam menu accordion nya.

Agar widget-widget tersebut, yang kalian taruh di sidebar misalnya, dapat kita masukkan dalam menu accordion, maka yang perlu dilakukan adalah membuat efek accordion pada sidebar nya.

Lalu, bagaimana caranya ?

1. Login ke blogger.
2. Pilih Template - Edit HTML.
3. Cari kode </head> dan letakkan kode berikut ini diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper1 .widget-content').hide();
    $('#sidebar-wrapper1 h2').css('cursor', 'pointer').click(function() {
        $('#sidebar-wrapper1 h2').removeClass('active').next().slideUp('slow');
        if ($(this).next().is(':hidden')) {
            $(this).addClass('active').next().slideDown('slow');
        } else {
            $(this).removeClass('active').next().slideUp('slow');
        }
    });
});
//]]>
</script>


4. Simpan Template.

 *Keterangan : Apabila didalam template sudah terdapat kode jQuery seperti yang saya beri garis bawah, maka tidak perlu diletakkan lagi.

Tips : Coba lihat kode yang saya beri warna ungu, kode tersebut tidak 100% sama, karena ID tiap template mungkin berbeda-beda. Coba temukan kode yang kurang lebih seperti ini :

<aside id='sidebar-wrapper1'>

        <b:section class='sidebar1' id='sidebar1' preferred='yes'>

..................................................................

..................................................................

        </b:section>

 </aside>


atau mungkin yang seperti ini :

<div id='sidebar-wrapper1'>

        <b:section class='sidebar1' id='sidebar1' preferred='yes'>

..................................................................

..................................................................

        </b:section>

 </div>


Lihat kode berwarna kuning, itulah ID sidebar template yang harus sama dengan kode berwarna ungu dalam script untuk menciptakan efek accordion pada sidebar blog.

Bagaimana sob?
Terima kasih, semoga bermanfaat yah...

Postingan ini sekaligus menjawab pertanyaan Agan Sophie Riswandono, semoga membantu...

48 comments

  1. Wah, keren..
    Nice artikel sob shake

    ReplyDelete
  2. Sangat bermanfaat gan tutorialnya , saya nantikan lagi kunjungan baliknya hehehe happy

    ReplyDelete
  3. Hebat...klw jago script enak banget yah, bisa modifikasi sesuka hatinya. :D

    ReplyDelete
    Replies
    1. ga jago, masih dalam proses belajar mba... shake shake shake

      Delete
  4. makin keren nih sidebarnya ya mbak, jadi lebih ringkas.
    terimakasih tutornya mbak

    ReplyDelete
    Replies
    1. iya, jadi yg suka sama widget bejibun di sidebar nya tetap bisa menghemat space... pleased

      Delete
    2. linknya sudah saya pasang juga mbak di blogroll, terimakasih atas kerjasamanya.
      keep smile and happy blogging :)

      Delete
    3. sama-sama gan...
      keep blogging juga gan... pleased

      Delete
  5. kunjungan pagi..
    udah dapet yang anget anget lagi hehehe trima kasih mbak admin yang cantik tutorialnya menambah wawasan saya shake happy

    ReplyDelete
  6. Terimakasih atas sharingnya tentang membuat sidebar accordionnya. Sehingga widget tidak memanjang kebawah.

    ReplyDelete
  7. wah mantaph nih bro
    d bukmark dlo lah, ijin bro :D
    thanks udah berbagi

    mampir d blog ane bro
    arie-apthanta.blogspot.com

    ReplyDelete
  8. weh weh,, kalau saya berkunjung kesiini pasti bawaannya pengen nyoba tipsnya deh mbak..keren kere..dahh..

    mksih dh share yaapss ! shake

    ReplyDelete
  9. wah jarang ada cewek yang bisa sabar otak atik beginian .. wat2

    keren banged mba,
    lanjutkan cheer

    ReplyDelete
  10. trik yang sangat menarik. terimakasih

    ReplyDelete
  11. ini yang saya cari, terimkasih mba :)

    ReplyDelete
  12. jumpa lagi disini abis muter2 cari guest book gak ketemu :)
    makin semangat aja nih mbak, sukses selalu dan tentunya i like this accordion

    ReplyDelete
    Replies
    1. hehehe, memang ga ada guest book nya gan kalo disini...
      terima kasih ya...

      Delete
  13. tutorial yg sangat berguna sekali sobat, sepertinya perludicoba nih
    terima kasih sudah berbagi

    ReplyDelete
  14. Mantap Tutornya Mbak, meminimalisir tampilan space sidebar dan kelihatan lebih rapih dilihat

    ReplyDelete
    Replies
    1. iya gan biar sidebar nya menjadi lebih rapi...

      Delete
  15. wah keren nie bak bro..ijin nyoba ya!

    ReplyDelete
  16. Informasi baru sob , Ternyata google sudah menduduki peringkat 2 alexa , lebih jelasnya kunjungi url berikut http://planetajaib.blogspot.com/2013/06/Wow-Ternyata-Google-Sudah-Peringkat-2-Alexa.html

    ReplyDelete
  17. keren gan.. kapan2 boleh dicoba :D

    http://nandarious.blogspot.com

    ReplyDelete
  18. Terima kasih shake :D
    baru sempet baca artikelnya

    ReplyDelete
  19. Menu Accordion bisa buka tutup ya ? Keren , Nice info

    ReplyDelete
  20. salam kenal artikelnya oke

    mampir ke http://johaedi.blogspot.com

    ReplyDelete
  21. side according :) mantaf gan makasih telah berbagi...

    ReplyDelete
  22. blog amateur q kak :D tulisan-kaktegar.blogspot.com

    ReplyDelete
  23. Terima kasih banyak infonya, bagus, dan sulit.hehe
    ilmudes.blogspot.com

    ReplyDelete