Cara Membuat Menu Accordion Pada Sidebar

Cara Membuat Menu Accordion Pada Sidebar - Poetra Pakumis | kali ini saya akan share Cara Membuat Menu Accordion Pada Sidebar cara ini saya pelajari dari template buatan maskolis yaitu Johny wuss setelah mencari-cari bagaimana cara membuatnya akhirnya ketemu juga dan langsung saya praktekiin ternyata berhasil. dan saya ngak mau senang sendiri jadi saya share aja caranya berikut Screentsohtnya :

Berikut Cara Membuatnya :

1. Login akun bloggger sobat.

2. Template - Edit HTML (Jangan lupa centang Expand Widget Templates).

3. Lalu cari kode ]]></b:skin> dan masukan kode di bawah ini di atas ]]></b:skin>.

.sidebar h2{background-color:#1a4d86;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEHDrkZLsVYxKdZQQAB80wSNLqv67KJws7Dy4TUH_W8TZsKYCUgy8PG-4LpJTpzWwJnbotG98PMhDZk2D2sqgwfH2TulhnxUKicKVnucxxSioIwCInnex3GWCvtMlgc7mHNolRTVofzVSR/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;font:bold 12px Arial;color:#eee;margin:0;padding:7px 0 7px 10px;text-shadow:0 1px 1px #000}
#sidebar h2.active{background:#1a4d86;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-aQGCFs24cb3VK6usbE4Sup44TX3TfUMLfYMPtjUXEBZGXlP4nqn49OhwOsvPPpnYEw7tZ4sBqrJMdjXqI5MqRNEGaBVBOwbuf4vPdEhaOLbqRYXZt6CaojXKOSC6_iFdcAWumoYxX-3-/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center}
.sidebar{color:#666;line-height:1.3em;border-top:none;font:11px Arial}
.sidebar li{line-height:1.3em;margin:0;padding:5px 0 4px;border-bottom:1px dotted #ddd}
.sidebar .widget{margin-bottom:1px;padding:0}
.sidebar .widget-content{margin:0 auto;padding:0 5px}
.sidebar a:link,.sidebar a:visited{font:bold 12px Arial;color:#555;text-decoration:none}
.sidebar li a:hover{color:#015bb3}
.sidebar ul{list-style:none;margin:0;padding:5px 0}
.sidebar1 ul{list-style:none;padding:0;margin:0;}
.sidebar1 .widget {margin:0px 0px 0px;padding:0}
#Label1 li {float:left; width:50%;}

 4. kalo proses di atas sudah dilakukan silahkan cari kode </head> dan letakan kode di bawah ini di atas kode </head>.

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

5. Terakhir tinggal simpan dan lihat hasilnya.

Nah, sekian artikel tentang Cara Membuat Menu Accordion Pada Sidebar semoga artikel yang saya tulis bermanfaat bagi sobat semua.

Jika anda menyukai artikel Cara Membuat Menu Accordion Pada Sidebar dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.