Tutup buka gambar dengan spoiler

Akhir-akhir ini saya tertarik dengan spoiler, semenjak menggunakan trik ini blog lumyan jadi ringan diakses, mungkin karena banyak gambar yang saya tutup dengan spoiler ini bawaan blog jadi ringan.
Banyak jenis spoiler yang bisa digunakan. Kali ini saya berbagi tips spoiler yang sering saya gunakan sekaligus menjawab pertnyaan sahabatku yang meminta cara menyembunyikan gambar pada postingan, mungkin maksudnya adalah "spoiler".
Caranya sangat gampang sobat tinggal menambahkan kode dibawah ini saat memposting.!!
<div id="spoiler">
<div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'lihat lagi'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="Klik untuk melihat gambar " />
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
ganti dengan gambar atau tulisan/></a> </div>
<div id="hide">
</div>
</div>
</div>

Ganti tulisan berwarna merah sesuai selera sobat.

hasilnya seperti gambar di bawah ini



Tips Lainnya

* Label berputar (label Could)
* Cewek sexi pada komentar blogger
* Efek teks pada kursor
* Percantik blog dengan flash
* Tutup Buka gambar dengan spoiler
* Menu melayang pada blogger

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)