Perdana

Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

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.

Posted by Unknown at 7:15 AM

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: dan, membuat, menampilkan, menyembunyikan, sidebar, spoiler, toggle, untuk, widget