Sidebar Accordion Menu Atau Dropdown Sidebar

Dengan menerapkan efek accordion pada sidebar left atau right tentunya akan memperindah tampilan blog sobat agar tidak terlihat berantakan oleh pengunjung blog sobat.Dengan menerapkan efek accordion ini ada banyak keuntungan yang di terima pada tampilan blog sobat seperti :
*Tampilan sidebar tidak tampak berantakan atau rapih.
*Tampilan blog jadi elegn.
*Tampilan sidebar mendapat lahan yang maximal.
*Dapat menampung berbagai wedget blog dalam 1 jendela dropdown.
Untuk menerapkan Css dan Javascript Accordion ini,Tentunya sobat harus tau terlebih dahulu ID sidebar blog sobat karna bisa saja tidak sama dengan ID sidebar pada Menu Sedebar Accordion di bawah ini misalnya #sidebar-wrapper , #sidebar-wrapper h2 dan lain lain yang berada pada css blog sobat.

Caranya sebgai berikut :
Pertama tama sobat harus login dahulu ke akun blogger sobat.
"Login ke akun blogger" > "Buka dhosbord Edit HTML" > "Cari code ]]></b:skin>" Dan letakan code javascrift di bawah ini tepat di atas code "]]></b:skin>" ,Dan jika sudah ada code Css yang mirip dengan css di bawah ini,Silahkan ganti css tersebut dengan Css di bawah ini.
 

#sidebar-wrapper h2 {
  margin: 0 2px;
  padding:3px 7px 3px 13px;
  background-color:#111;
  border-color:#444 transparent #222;
  border-style:solid;
  border-width:1px 0;
  font:normal bold 12px "arial", Trebuchet, sans-serif;
  color:#fff;
  text-transform:uppercase;
}
#sidebar-wrapper h2.active span {
  padding-right:10px;
  background:#00ff00;
}
#sidebar-wrapper h2:hover {
  margin: 0 2px;
  padding:3px 7px 3px 13px;
  background:#ddaa6e;
  font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
  color:#00FF00;
  text-transform:uppercase;
  border-bottom:1px solid #404040;
}
#sidebar-wrapper h2.active {
  background-color:#052605;
  color:#00ff00;
  box-shadow:0 0 3px black;
  border-color:#555 transparent #222;
  border-style:solid;
  border-width:1px 0;
}
#sidebar-wrapper .widget {
  margin:0 0;
  padding:0 0;
}
#sidebar-wrapper .widget-content {
  margin-top:5px;
  padding:3px 5px 3px 0px;
}
#sidebar-wrapper .widget-content ul li {
  list-style:circle;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  padding: 3px 5px 3px 0;margin-left:0px;
}

Dan selanjutnya masih di halaman edit html cari code "</head>" Lalu simpan javascript di bawah ini tepat di atas code "</head>"

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Dan tahap ahir silahkan cek kembali Css dan javascript yang anda terapkan dan jika sudah kelihatan pas dan benar silahkan "Save Template" Anda.

Dan jika anda ngin membuat Sedebar left atau right melayang silahkan baca tutorialnya di sini "Cara membuat Sidebar floating atau melayang" jika anda sudah menerapkan Sidebar Accordion Menu di atas.

Advertisement