CARA MEMBUAT SPOILER DI BLOG


oke sob kali ini ane mau berbagi cara membuat spoiler di blog sob, fungsi dari spoiler sendiri adalah untuk membuat atau menampilkan (show) atau menyembunyikan (hide) teks mau pun gambar di postingan sob, atau bisa juga di letakan di sidebar sob.

Untuk menghemat sidebar atau tempat pastinya sob, biasanya sesepuh blogger menggunakan spoiler ini untuk menyembunyikan scipt atau teks yang panjang sob. oke tanpa banyak waktu sob cek di bawah aja sob bagi yang belum tau  cara membuat spoiler ikuti cara berikut ini:

Di bawah ini adalah kode yang bisa sobat gunakan untuk membuat spoiler:
<div id="spoiler"><div><input style="margin: 10px; padding: 0px; height:60px; font-size: 50px; font-weight:bold;" value="OPEN" 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 = 'CLOSE'; } else {
this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display= ''; this.innerText = ''; this.value = 'OPEN'; }" type="button"/><div id="show" style="border: 5px; solid red; margin 5px; padding: 2px; display: none; width: 90%;">
Sobat bisa memasukkan text atau alamat gambar di sini.
<br>
<img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"a>
</div><div id="hide"></div></div></div>

NOTE: Ganti yang berwarna merah dengan text atau alamat gambar sobat.
Di bawah ini adalah hasil dari kode-kode di atas.

begini sob hasil akhirnya code di atas tersebut.


Berkomentar lah yg sopan di Sini
EmoticonEmoticon