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.





12 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 Ananda mengatakan...

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

Game-Online mengatakan...

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

Rudy Hartono 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

achmad fitroh mengatakan...

tks masukannya mas....

Risdi Anto mengatakan...

Mantap Nich...
Buat Nambah Ilmu

Adhe Friant mengatakan...

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

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