cara membuat widget spoiler di blog buka tutup

Hai sobat Blogger ! 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 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>

Hasilnya akan terlihat seperti ini :

Klik untuk melihat

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...

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>

Hasilnya akan terlihat seperti ini :

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...

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

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :