CARA MEMBUAT MENU ACCORDION PADA SIDEBAR

CARA MEMBUAT MENU ACCORDION PADA SIDEBAR

CARA MEMBUAT MENU ACCORDION PADA SIDEBAR – Tampilan menu accordion  merupakan jenis tampilan menu yang paling dicari akhir-akhir ini. Menu ini memiliki bentuk yang simple dan enak dipandang mata. Dengan memasang menu accordion sobat bisa memperingkas tampilan blog karena hanya beberapa elemen yang aktif saja yang ditampilkan oleh menu ini. Penggunaan menu ini sangat cocok dipasang di sidebar guna memperkecil space yang tidak perlu dan cocok dipadukan pada sidebar yang memiliki widget recent comment, recent post blogger, random post blogger, script iklan, alexa site counter, atau bahkan banner kontes tertentu.

menu accordion blogspot

Pada dasarnya script ini menggunakan bantuan javascript, kode ini saya dapatkan pada bagian akhir kode template Johny Wusss yang terkenal hasil garapan Mas Kolis. Setelah saya mencoba untuk memasangkanya pada jenis template yang lain ternyata script ini berfungsi normal. Hanya saja perlu ada sedikit modifikasi kode css sehingga tampilan menu accordion ini bisa serasi dipadukan dengan tamplate blog yang sobat miliki.

CARA MEMASANG MENU ACCORDION DI SIDEBAR

#1 Log in ke blogspot, pilih Template > Edit HTML
#2 Pasang kode dibawah ini sebelum kode </body>, ini bertujuan untuk memberikan kesan mempercepat loading blog  agar isi kontent yang penting akan diloading terlebih dahulu

<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>

#3 Kode diatas merupakan kode default untuk template blogger standar. Apabila tidak berhasil sobat bisa mengganti kode warna merah sesuai dengan div id dan jenis tag headingnya pada sidebar template blog sobat.

#4 Setelah semuanya fix silahakan save template blog.

NOTE: jika sobat memasang kode ini maka sobat harus memasukan judul dari setiap widget, jika tidak maka isi dari widget tersebut tidak akan ditampilkan.

Alangkah baiknya jika sobat ingin memasang kode ini saya sarankan untuk menambah sebuah kode sidebar baru. Satu yang untuk dipasang kode ini dan yang satu lagi untuk memasang kode iklan.
seperti yang saya pasang pada kode blog ini, saya padukan sidebar yang baru tepat berada di atas sidebar yang lama. Tentunya dengan memodifikasi ini sobat harus sedikit menambahkan beberapa kode css untuk sidebar yang baru ini. Bagi yang gak mau repot sobat cukup memasang kode diatas saja.

CARA MEMASANG KODE SIDEBAR BARU

Untuk memasang kode sidebar ini caranya tinggal copy aja kode css dan kode sidebar yang lama kemudian masukan embel-embel kode nomor, jangan lupa untuk menyesuaikan kode css dengan penggunaannya div idnya. Untuk kode sidebar yang perlu dicopy silahkan sobat lihat pada kode yang diblock abu-abu pada gambar dibawah ini. Search menggunakan ctrl+f kemudian cari kodenya. Untuk selama macam perubahan jangan lupa untuk selalu membackup kode template untuk menghindari hasil yang tidak maksimal.

kode sidebar blogger

Demikian artikel CARA MEMBUAT MENU ACCORDION PADA SIDEBAR semoga bisa berguna untuk mempercantik tampilan blog sobat, Salam blogger semuanya. Bagi sobat yang masih binggung atau kurang begitu paham dengan tutorial ini.