Membuat Widget Seperti Spoiler


Beberapa hari lalu saya browsing dan di bantu dengan mbah goooogle awalnya sih mencari tema, ternyata tidak taunya nyasar ke blognya Ruangsc , di sana banyak tutorialnya tentang rdit edot blogger, setelah itu saya bingung dengan fan page widgetnya bisa di hide dan di show seperti spoiler, setelah saya cari tau ada sesuatu di balik itu. inilah previewnya:

Hide Widget


Show Widget

mau tau sesuatunya ? liat tutorial di bawah ini:


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


1. Sobat Login ke akun Blogger sobat.
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 di bawah ini, 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 di bawah ini pada widget-widget yang akan sobat 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. Simpanlah kerjaan sobat, Liat hasilnya.

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.

0 Response to "Membuat Widget Seperti Spoiler"

Post a Comment