1.09.2010

Membuat gambar menjadi spoiler

Nah yang ini adalah trik spoiler hasil formulasi sederhana saya, yaitu gambar yang bisa di ubah menjadi spoiler,cara ini sangat cocok untuk blog yang berisikan artikel dengan topik utama gambar sehingga tidak terlalu panjang memberikan penjelasan tentang gambar yang bersangkutan, tinggal memberi keterangan "klik pada gambar" langsung sreeeeetttttttt....penjelasan tentang gambar tersebut akan muncul. Sehingga bisa menghemat space.
<div id="aditya"><div><div id="show" color="black" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="aditya"><div><img src="http://lh3.ggpht.com/_tx2Jo0pZpb8/StdP0HpzxkI/AAAAAAAAAgA/X2faNmIbP7E/s576/mas%20adit.jpg" style="margin: 10px; padding: 0px; width: 100px; height: 100px;" 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 = 'Hide aditya!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show aditya!'; }"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">TEKS daN GAMBAR YANG INGIN DI TAMPILKAN</div></div></div></div></div>
Contoh :

Keterangan vital :

http://lh3.ggpht.com/_tx2Jo0pZpb8/StdP0HpzxkI/AAAAAAAAAgA/X2faNmIbP7E/s576/mas%20adit.jpg ganti dengan URL gambar
width: 100px; height: 100px; adalah ukuran gambar, bila anda ingin gambar muncul sebesar aslinya cukup di hapus bagian ini.

Untuk lebih jelasnya baca artikel spoiler saya sebelumnya, lihat di related category. oh ya bergua ga berguna di komen ya pren........
Term Of Use : Tutorial berciri khas mohon tidak kopas untuk konten blog anda, bila itu terjadi...mohon sertakan sumbernya...trims.

2 komentar temen:

gaelby salahuddin mengatakan...

thanks infonya sgt membantu, gak sabaran pengen langsung nyoba, hehee... Slam peace... :)

http://Gaelby.blogspot.com

Garuda Mujahid mengatakan...

kang bagus itu cara spoilingnya.. jadi serasa punya kaskus dalam blog.. kwakwkakwa.. kita tukeran link yuk kang..

ini laman saya
islamic-quest.blogspot.com

ini email saya untuk konfirmasi dari akang.

garudamujahid@yahoo.com

ditunggu surelnya ya kang..