Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:

1. Login ke akun Blogger kamu.
2. Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
3. Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
4. Beri tanda centrang pada Expand Template Widget.
5. Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:
/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {display:inline}
6. Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:
<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if (whichpost.className=="widgetshown"){
whichpost.className="widgethidden";
}
else{ whichpost.className="widgetshown";
}
}
</script>
7. Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:
<h2 class='title'><data:title/></h2>
8. Ganti kode tersebut dengan kode ini:
<a href='javascript:togglespoiler (&quot;widget-spoiler1&quot;)' title='Show/Hide Widget'><h2 class='title'><data:title/></h2></a>
9. Kemudian pada kode berikut, yang ada di bawahnya:
<div class='widget-content'>
10. Ganti dengan kode ini:
<div class='widgethidden' id='widget-spoiler1'>
11. Simpan dan Lihat hasilnya
    
    Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?
    
    Catatan:
    Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.

Related Posts : Spoiler Show Hide