cara menambahkan widget spoiler buka tutup untuk artikel kita

cara menambahkan widget spoiler buka tutup untuk artikel kita

Hai sobat Blogger ! 

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

<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..denagan tulisan artikel anda..isi tulisan spoiler..denagan tulisan artikel anda...isi tulisan spoiler..denagan tulisan artikel anda. isi tulisan spoiler..denagan tulisan artikel anda. isi tulisan spoiler..denagan tulisan artikel anda .isi tulisan spoiler..denagan tulisan artikel anda...</div> </div> </div> </div>

Hasilnya akan terlihat seperti ini :

Klik untuk melihat

isi tulisan spoiler..denagan tulisan artikel anda..isi tulisan spoiler..denagan tulisan artikel anda...isi tulisan spoiler..denagan tulisan artikel anda. isi tulisan spoiler..denagan tulisan artikel anda. isi tulisan spoiler..denagan tulisan artikel anda .isi tulisan spoiler..denagan tulisan artikel anda...

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="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

6.) terakhir,klik simpan dan lihat hasilnya