Membuat Sidebar Accordion

Membuat Sidebar Accordion

Untuk membuatnya sangatlah mudah sobat tinggal ikuti langkah2nya dibawah ini.

1.Login Blogger.com
2.Rancangan --> Edit HTML
3.Copas kode berikut diatas kode ]]></b:skin>

#sidebar-left-1 h2 {

margin: 0 2px;

padding:3px 7px 3px 13px;

  text-shadow:0 1px 0 black;

  background-color:#333;

  background-image:-webkit-linear-gradient(top,#333,#3c3c3c);

  background-image:-moz-linear-gradient(top,#333,#3c3c3c);

  background-image:-ms-linear-gradient(top,#333,#3c3c3c);

  background-image:-o-linear-gradient(top,#333,#3c3c3c);

  background-image:linear-gradient(top,#333,#3c3c3c);

  border-color:#444 transparent #222;

  border-style:solid;

  border-width:1px 0;

font:normal bold 12px &#39;Trebuchet MS&#39;, Trebuchet, sans-serif;

color:#fff;

text-transform:uppercase;

}

#sidebar-left-1 h2:hover {

margin: 0 2px;

padding:3px 7px 3px 13px;

background:#ddaa6e;

font:normal bold 12px &#39;Trebuchet MS&#39;, Trebuchet, sans-serif;

color:#fff;

text-transform:uppercase;

border-bottom:1px solid #404040;

}

#sidebar-left-1 h2.active {

background-color:#000;

color:#00ff00;

  background-image:-webkit-linear-gradient(top,#3c3c3c,#222);

  background-image:-moz-linear-gradient(top,#3c3c3c,#222);

  background-image:-ms-linear-gradient(top,#3c3c3c,#222);

  background-image:-o-linear-gradient(top,#3c3c3c,#222);

  background-image:linear-gradient(top,#3c3c3c,#222);

  box-shadow:0 0 3px black;

  border-color:#555 transparent #222;

  border-style:solid;

  border-width:1px 0;

}

#sidebar-left-1 .widget {

margin:0 0;

padding:0 0;

}

#sidebar-left-1 .widget-content {

padding:5px 5px 5px 13px;

max-height:300px;

overflow:auto;

}

#sidebar-left-1 .widget-content ul li {

  border-top:1px solid #444;

  border-bottom:1px solid #222;

4.Lalu cari kode dan pastekan kode berikut di atas  </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-left-1 .widget-content').hide();
    $('#sidebar-left-1h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-left-1  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-left-1h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

5. Save dan lihat hasilnya.

Untuk membuatnya sangatlah mudah sobat tinggal ikuti langkah2nya dibawah ini. 1.Login Blogger.com 2.Rancangan --> Edit HTML 3.Copas k...