Home » , » Cara Membuat Menu Accordion Pada Sidebar

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 :

Cara Membuat Menu Accordion Pada Sidebar

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(http://1.bp.blogspot.com/-9FCgC3SpZ00/UPMiEedG1VI/AAAAAAAACl0/zLgl3K6_d3I/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(http://2.bp.blogspot.com/-QB-QrnRTSJI/UPMiEYKozJI/AAAAAAAAClw/ieBOFWLIqlM/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.

add a comment 5 komentar:

  1. Replies
    1. Mungkin langkah di atas belum agan lakukan dengan benar.
      Coba lakukan cara di atas dengan teliti gan atau bisa saya editkan diblog sobat silahkan jadikan saya admin di blog sobat makmurrizhki@gmail.com

      Delete
  2. Cara menghilangkan efek shadow di tulisannya gimana? Soalnya template blog saya light, gak cocok dikasih efek shadow, tulisan widgetnya jadi sulit dibaca. Coba cek di sini http://ivanpito.blogspot.com

    ReplyDelete

Peraturan berkomentar di blog's POETRA PAKUMIS

- Silahkan berkomentar sesuai artikel bisa berupa saran dan kritik,
- Anda juga bisa menggunakan gambar EMOTICON pada komentar,
- Mohon untuk tidak meletakan Link Hidup, Sara, Dan Spam.
- Sebisanya komentar anda saya balas dengan Cepat,
- Untuk mengetahui balasan komentar dari saya silahkan berlangan artikel.