Selamat pagi menjelang siang para pembaca yang budiman, sambil menjalankan aktifitas masing - masing mungkin yang saat ini lagi santai, sedang ngopi - ngopi, sedang browsing, sedang mencari trik gratis, sedang blogging. Yuck sejenak kita simak Cara Membuat Sidebar Show / Hidden di Blogger, khususnya untuk blogger pemula yang masih belum paham.
Memang untuk menghafal script tidak mudah, saya sendiri juga sama seperti anda. Tidak jago dalam urusan menghafal script. Maka dari itu saya catat disini apa saja yang sudah saya pelajari agar tidak lupa sekaligus bisa berbagi dengan anda yang belum tahu.
Sidebar Show / Hidden untuk demo bisa dilihat di halaman Homepage
 |
| Contoh 1 Widget Show / Hidden |
 |
| Contoh 2 Widget Show / Hidden |
- Contoh 1 bisa kita lihat bahwa sidebar yang tampil hanya pada bagian yang paling bawah atau yang terakhir sedangkan yang lainnya di hidden, tapi jangan khawatir ketika kita klik sidebar yang dihidden nanti akan muncul sedangkan yang lainnya tersembunyi. Sebenarnya fungsinya hanya untuk menghemat tempat saja agar tidak terlalu panjang kebawah.
- Untuk contoh 2 sebaliknya sidebar yang tampil hanya pada bagian yang paling atas atau paling awal. namun fungsinya tetap sama dengan yang contoh 1
Cara Membuat :
- Masuk ke Blogger anda masing masing, kemudian langsung menuju Template > Edit HTML
- Sidebar yang akan saya ubah disini saya sesuaikan dengan template yang saya pakai yaitu sidebar 3 jadi cari tau dulu nama sidebarnya di template anda.
- Kemudian copy code html ini diatas </body> cari dengan CTRL + F
Copy Paste - Copyright by SIC
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#sidebar3 .widget-content').hide();
$('#sidebar3 h2:first').addClass('active').next().slideDown('slow');
$('#sidebar3 h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar3 h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
//]]>
</script>
- Ganti yang saya tandai dengan warna merah dengan nama sidebar anda
- Untuk yang saya tandai dengan warna biru bisa anda ubah last jika anda menginginkan sidebar terakhir yang akan ditampilkan seperti tampak pada contoh 1 apabila yang ingin ditampilkan sidebar pertama maka anda tidak usah mengubahnya.
- Terakhir jangan lupa di Save Template
Selamat mencoba, apabila kesulitan buat pertanyaan saja pada kolom komentar.
Share this article with your friends
2 komentar
terima kasih banyak atas artikelnya yang berharga
http://salsabila-ravina.blogspot.com
Sama - Sama ^_^
Posting Komentar
Jangan berkunjung tanpa meninggalkan jejak.
- No Spam - No Phising - No Live Link
Salam Blogger Indonesia, Silakan Tinggalkan Pesan Agan disini... !!!