CARA MEMBUAT SPOILER DI BLOG



Fungsi dari spoiler ini adalah untuk menampilkan (show) atau menyembunyikan (hide) image maupun text pada halaman posting atau bisa juga di letakkan pada sidebar. Untuk menghemat tempat biasanya para blogger menyiasati dengan menggunakan spoiler tersebut. Bagi sobat yang ingin membuat spoiler dan belum tahu caranya bisa ikuti cara 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>

Ganti yang berwarna merah dengan text atau alamat gambar sobat.
Di bawah ini adalah hasil dari kode-kode di atas.
Silahkan diklik untuk melihat hasilnya.





14 komentar:

Sandhi Oke mengatakan...

berkunjung neh..
kunjung balik ya www.ilpeng.com, dijamin rugi jika ga baca

Darmasena mengatakan...

@Sandhi Oke : Oke, trmksh tlah berkunjung. Aku pasti mampir ke situ, tunggu ya....!

Kaka Cutez mengatakan...

aku juga ke blog anda...
kunjungi balik ya...blog aku,hehehe...
berbagi-karya.blogspot.com

Darmasena mengatakan...

@kaka Cutez : Makasih kunjungannya.

Ivanku mengatakan...

Kalo bentuk OPEN-CLOSE nya bisa diganti sama gambar ga? kalo bisa tolong jelasin juga dong makasih,,

Ardiouzee mengatakan...

blog walking.. salam knal

Happy Fibi mengatakan...

Thanx, ya :))
Sangat membantu, ni..

Yuliusgames mengatakan...

Thanks infonya, yuk gabung ke blogs aku ditunggu
http://onlinegames-game-online.blogspot.com
;)

Anonim mengatakan...

dengan memasang spoiler pada form komentar atau widget atau di dalam posting yg banyak memasang gambar, akan membuat loading blog lebih ringan dan lebih praktis, happy blogging

Unknown mengatakan...

tks masukannya mas....

Unknown mengatakan...

Mantap Nich...
Buat Nambah Ilmu

Adhe Friant mengatakan...

gan mau nnya..
meletakan'a di entri apa di "html" entri..
mohon bntuan'a..
thnx

Unknown mengatakan...

Terima kasih atas ilmunya. Akan saya coba terapkan di blog saya ini
http://goo.gl/3q2VZH

REN mengatakan...

MENANGIN NIH IPHONE 11 SECARA GRATIS!

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Posting Komentar