cara membuat widget spoiler di blog buka tutup

Hello Teman! Saya mau tanya nih, siapa disini yang suka lihat-lihat thread atau malah jadi member di situs kaskus.us?
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 di klik, 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 :

<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;"> test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....</div> </div> </div> </div>

Hasilnya akan terlihat seperti ini :

Klik untuk melihat

test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....test....

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

<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="Open show code." type="button"><span style="color: black;"><span style="color: #000000; font-weight: bold;">Open show code</span></span></button></div> <div id="spoiler" style="display: none;"> <span style="color: #000000; font-weight:10px bold;">Test....Test....Test....Test....Test.....Test....Test....Test....Test....Test.....Test....Test....Test....Test....Test.....Test....Test....Test....Test....Test.....</span></div> </div> </center>

Hasilnya akan terlihat seperti ini :

Test....Test....Test....Test....Test.....Test....Test....Test....Test....Test.....Test....Test....Test....Test....Test.....Test....Test....Test....Test....Test.....

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

[Semoga Bermanfaat]

 

© copyright by Ananda Donie | Tutorial Blog, Cinema, Pendidikan, Mutiara Bijak, Download