Cara Membuat Spoiler / Tombol Hide dan Show di Blogger

Cara membuat spoiler / tombol hide dan show di blogger

Pasti temen-temen bertanya-tanya, gimana sih cara nampilin / bikin tombol spoiler
atau tombol hide and show di blogger ?
kali ini aku mau bikin tutorial cara pembuatannya di blog
Tombol ini berguna banget ketika kita ingin mengepost gambar yang relatif besar ( BWK ) , namun kita tidak ingin merugikan user/pembaca blog apabila si pembaca tidak ingin mengeload gambar tersebut. Istilahnya, kita menyelamatkan kuota modem internat para reader. 

Langsung aja ya

 Langsung saja Copy-paste kode dibawah ini :
<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

Tulis/letakkan disini isi content ( gambar/video/teks) yang akan sobat kehendaki

 <br>
</div>
</div>
</div>

Untuk width:100px; bisa anda ubah sesuai keinginan dan selera anda sendiri
Yang aku beri warna merah, anda bisa mengeditnya sesuai keinginan dan selera masing-masing


Klik show untuk melihat

Kalau anda menginginkan tampilan hanya tulisan show/hide saja, anda tinggal perlu menghilangkan kode JUDUL SPOILER. Kalau anda ingin mengganti tulisan kata show / hide, anda tinggal ubah sendiri kata2 show / hide yang telah saya beri huruf merah

Tidak ada komentar: