45 Tanggapan 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. 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
  3. 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
  4. Nice Share Sob

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

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

    BalasHapus
  6. 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
  7. 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
  8. 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
  9. Balasan
    1. silahkan disimak dan dipelajari gan, itung-itung latihan saya juga harus banyak latihan lagi, hehe :)

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

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

    BalasHapus
  11. 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
  12. Ayoga,, Izin Share didieu nya http://masgober.blogspot.com

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

    BalasHapus
  14. 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
  15. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  16. Mantep lah,,, di coba lah di blog saya..

    www.banandownload .com/download-best-popular-games-ps1/

    BalasHapus

Berkomentarlah yang sopan, sesuai dengan topik yang dibahas!