Cara membuat widget spoiler buka tutup di blog

Yang sering atau pernah ke kaskus pasti pada mengenal yang namanya spoiler dong,spoiler adalah tombol yang digunakan untuk meringkas suatu tampilan dengan cara menyembunyikannya di balik tombol tersebut,jika diklik,maka tampilan yang disembunyikan akan dimunculkan,dan hebatnya lagi dapat ditutup/disembunyikan lagi,contoh spoiler tersebut adalah bisa dilihat di gambar diatas / widget di panel kanan blog ini

Sobat tertarik untuk membuatnya di blog sobat?caranya cukup mudah kok,dijamin gak repot deh,hehehe

1.) Login ke akun blogger sobat
2.) Langsung menuju ke Dashboard > Rancangan > Edit tata letak > Tambah widget > Edit html/javascript . lalu copy kode berikut ini ke dalam form html yang ada

Kode

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Klik untuk melihat </span></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...
isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...isi tulisan spoiler...</div>
</div>
</div>
</div>

Atau pilih model spoiler yang lain ( tidak buka tutup )
Copy kode berikut ini :

Kode

<center><div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Klik Untuk melihat." type="button"><span style="color: black;"><span style="color: #006600; font-weight: bold;"><blink>Klik untuk melihat</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="color: #006600; font-weight: bold;">Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...Isi teks spoiler...</span></div></div></center>

3.) Ganti tulisan "Klik untuk melihat/menyembunyikan" sesuai dengan keinginan sobat misalnya klik,buka,open,dll
4.) Ganti tulisan "Isi teks spoiler" dengan isi / tampilan yang akan ditampilkan setelah tombol tersebut di klik
5.) Untuk menghilangkan kedip ( kelap-kelip ) hapus saja kode <blink> dan </blink> diantara teks isi spoiler
6.) Ganti Buka/Tutup dengan kata yang diinginkan
7.) Terakhir,klik simpan dan lihat hasilnya