Cara Membuat Sidebar Akordion dengan jQuery


Cara Membuat Sidebar Akordion dengan JQuery di Blog | Sidebar akordion memang sangat menarik untuk di pasang di blogger, keunikannya widget-widgetnya yang muncul hanya 1, maksudnya widget paling atas muncul pertama kali saat blog di buka, widget yang ke 2 ke 3 ke 4 dan seterusnya, disembunyikan, maksudnya yang muncul hanya judul-judulnya saja, jika kurang jelas lihat gambar di bawah ini.
Sebelum mencoba artikel ini ada baiknya template sobat di back up dulu, untuk memasang sidebar akordion sobat harus mengenal ID sidebar dan ID sidebar h2 masing-masing, untuk lebih jelasnya lihatlah gambar dibawah ini :

ID #sidebar :


ID #sidebar h2 ( judul widget di sidebar ) :


Langkah-Langkah Membuat Sidebar Akordion :
  • Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode </head> (kode javascript ini dengan ID #sidebar-wrapper :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<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>
Demo : http://dte-dummy.blogspot.com/

Jika mau bisa dibuka lalu ditutup lagi pakai kode ini :
<!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#sidebar-wrapper .widget-content').hide();$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');$('#sidebar-wrapper h2').css('cursor','pointer').click(function(){$('#sidebar-wrapper 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>
Demo : http://demo-anak-layangan.blogspot.com/

Jika di template sobat sudah memasang jQuery, jangan copy kode di atas, karena satu template hanya memasang satu jQuery, jika lebih beberapa widget tidak akan berfungsi.

Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:
<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>
Atau seperti ini dengan memakai ID #sidebar
 <div id='sidebar'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>
Saya rasa artikel ini sudah cukup jelas, jika ada yang mau ditanyakan, silahkan berkomentar dibawah, klo saya tau, pasti saya jawab, klo saya gk tau saya alihkan pertanyaan sobat pada DTE. Source : DTE

Awas jangan copas sembarangan, apalagi tanpa link sumber ke blog ini, bisa-bisa blog sobat di banned oleh google, karena semua artikel blog ini dilindungi oleh DMCA

45 komentar untuk "Cara Membuat Sidebar Akordion dengan jQuery"

  1. Pertamax nyimak ya mas :D
    Ditunggu komen baliknya..

    BalasHapus
    Balasan
    1. oke sob, tapi koment baliknya besok ya, sekarang saya lagi pusing mikirin, comments author yg agak error sedikit ;(( ada solusinya gk ? :-s
      http://i.imgur.com/BNPlEOC.png

      Hapus
    2. alhamdulilah akhirnya nemu juga solusinya, masalahnya upload kembali gambarnya, hehe :-s

      Hapus
  2. Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  3. Kok aku gagal terus ya kak, kira-kira kesalahannya dimana ya, mohon bantuannya ?

    BalasHapus
    Balasan
    1. coba pake kode ini, pastikan di template sobat sudah memakai jQuery versi terbaru :
      <!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
      <script type='text/javascript'>
      //<![CDATA[
      // sidebar
      $(function(){$('#kanan .widget-content').hide();$('.sidebar h5:first').addClass('active').next().slideDown('slow');$('.sidebar h5').css('cursor','pointer').click(function(){$('.sidebar h5').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
      //]]>
      </script>

      Hapus
  4. dulu pernah coba ini gan :D keren banget si..

    BalasHapus
    Balasan
    1. haha, iya sih lumayan, tapi buat HTML tanpa judul tidak akan muncul widgetnya :) solusinya buat 2 sidebar, #sidebar-wrapper dan #sidebar-wrapper2 :-#

      Hapus
    2. owh gitu ya gan.. ribet juga si..

      Hapus
    3. lumayan lahh :-s tapi hasilnya top (h)

      Hapus
  5. Nice Share Sob

    http://gilang-cyber4rt.blogspot.com/2013/08/widget-krizeer.html

    BalasHapus
  6. cara pasang emot d bok komentar gimana ya..

    BalasHapus
    Balasan
    1. dipelajari disini nih : http://blog.kangismet.net/2013/05/membuat-judul-pada-pesan-formulir-kommentar.html

      Hapus
  7. Wah keren gan..Rinci Banget code code nya..

    Visit Back ..http://www.center60.com/

    BalasHapus
    Balasan
    1. makasih sob, saya akan kunjungi blog sobat setelat selesai memasang infox ya, soalnya mau ada perubahan sedikit pada tampilan homepage, hehe x-)

      Hapus
    2. akhirnya selesai juga tampilan baru di postingan :-s

      Hapus
  8. Saya juga sempet mau pasang ini, soalnya masih bingung modifikasi jsnya. Sya mau pasang ini pada beberapa widget saja, tapi nice share sob. :D

    BalasHapus
    Balasan
    1. sama-sama sob, tapi klo masalah Javascript saya cuman ngerti 10%, hehe cuman bisa ganti ID dan Class yang ada di Javascript itu doang :-s

      Hapus
    2. saya juga sama sob, cuman ngerti dikit kalau masalah JS. :D

      Hapus
    3. haha, harus banyak belajar dari DTE yahh :-)

      Hapus
    4. Bner tuh harus banyak belajar dari DTE, dewanya masalah kayak ginian. :-d

      Hapus
    5. tapi saat saya belajar di DTE, banyak kode-kode yang tidak saya mengerti, jadi saya menyimak saja komentar dari postingannya, hehe :D

      Hapus
    6. bener gan.

      Saran : gan tanggal icon infoxnya gk nyambung, coba ganti dg ini. Biar mantep. :)
      .infox:hover .d-header{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAVtJREFUKJGVkDFrFFEUhb87M/sei6YRwSDY2oRokUawUxCxsDD/IX9BUMtUYv6ApYK9ta12FiJsI2ijblIljWb33nkzx8Igw8SNeLp37vle8cEgkjIrMpvN0qobEfHd3d+Oe3d/7+5fhl0jqY6Id8AnSZfN7Ke7vwGuA5jZB0mXgItt277o+/5qSummRcTmZDL5GBGHwB5QAY/qup4CdF23AJ4Cx8DDlNKFtm2vEREb+s9ExEYDpIg4AnbM7PxKAb/l/QCem1kiIrbcfX4WMBI1j4it5kTA0OwusC3plaRDM9sBXuacnw23zfjHlNKT5XL5raqqOznnBxFxV9K58e4UWEq53ff9/ZTSvZPqs5lt/hPsuu6xma1HxJ6kI0k3gNenwFJKVdf1nyLnfGu02R0+JNF1XdUA+8Cau8+Hkv4WSQBrwL4BLBaLK5LWm6bpzwJLKZWZHUyn06+/AJMu26P2Y5ymAAAAAElFTkSuQmCC"); background-position:0 50%; background-repeat:no-repeat }

      Hapus
    7. baru sadar nih, wkwkwkwkk gk nyambung ya ?, saking kecilnya tuh gambar saya belum sempet cek, yang ada dipikiran saya cuman berhasil doang tutorialnya, haha, makasih sob udah bantu :)

      Hapus
  9. kalo kutak katik Jquery..saya angkat tangan dech :-)

    BalasHapus
    Balasan
    1. saya juga dapatkan kode Javascriptnya dari DTE,hehe saya juga angkat tangan sob :-s

      Hapus
  10. Balasan
    1. silahkan disimak dan dipelajari gan, itung-itung latihan saya juga harus banyak latihan lagi, hehe :)

      Hapus
  11. Waow... Nice Tutorial Izin Nyoba ya... :)

    Comment Back: http://bleaz3ers-id.blogspot.com

    BalasHapus
  12. Mas .. Boleh Minta kode yang sorot Informasi langsung muncul Poskan oleh , komentar , dan labelnya gak? (htmlnya,js) kalo css nya udah ada .. :) Izin dlu ya .. mau ubah tampilan lagi , hehe :)

    BalasHapus
    Balasan
    1. dari pertama kali saya pake info di homepage, pasti ada yang menanyakannya sama saya, ehh bener ada nih simpan HTML ini tepat di atas kode HTML gambar, atau HTML judul postingan, maaf klo ngawur, hehe :-s
      <!-- Infox dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div class='infox'>
      <div class='post-author vcard'>
      <b:if cond='data:post.authorProfileUrl'>
      <span class='fn'>
      <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='Admin'>
      <data:post.author/>
      </a>
      </span>
      <b:else/>
      <span class='fn'><data:post.author/></span>
      </b:if>
      </div>
      <div class='d-header'><span class='timestamp-link'><abbr class='published updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></span></div>

      <div class='d-kmtr'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div>
      </div>
      <!-- Infox dari Blog Krizeer (www.yoga-tc.blogspot.com) Selesai -->

      Hapus
    2. <i rel="pre">
      <a class='d-kmtr' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>
      </a></i> kode mu berbeda jauh dengan ku . . aku boleh cekidot dari template lama :P http://mafia-darktheme.blogspot.com/ tapi thanks ya :D

      Hapus
  13. Ayoga,, Izin Share didieu nya http://masgober.blogspot.com

    BalasHapus
  14. interesting articles and commentaries friend, I became interested in reading, I introduce a new blogger from Indonesia origin. greetings

    BalasHapus
  15. Mas jika saya menerapkan cara ini untuk bagian halaman home saja alias sidebar dibagian beranda apa saya perlu menambah tag kondisional? dan kira2 penerapanya seperti apa ya?

    BalasHapus
  16. You should discuss the competition comparison of the web log. you'll highlight it's remarkable. Your web log exploration/tour can broaden your conversions. agenibcbet.us

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top