Cara Membuat Spoiler

Lama juga saya tidak membuat postingan di blog ini, gatal juga rasanya tangan pengen mencet – mencet keyboard. Tutorial kali ini, saya akan membahas tentang membuat spoiler pada blog.

Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

Spoiler ini bisa sobat letakkan di postingan, mungkin sobat gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

Contoh Spoiler:

Untuk membuat spoiler, silahkan sobat copy kode script nya dibawah ini :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan kode script, HTML dan teks anda disini

Keterangan :

Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
Width : 55px untuk lebar spoiler.
Font-size: 11px untuk besar tulisan pada kotak spoiler.
Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Selamat mencoba ! Happy

Oleh : Dody FariaL Pada hari Rabu, September 30, 2009

Berlangganan artikel terbaru via Email

Artikel Lainnya :

40 comments

Download gratis

30 September 2009 pukul 20.21

Pertamax ya saya ?.
Lumayan dapat ilmu lagi...
Tq ya bro.

harto

1 Oktober 2009 pukul 05.16

Trims atas infonya, sangat bermanfaat & jadi nambah ilmu neh...

tutorial software

1 Oktober 2009 pukul 13.55

Thnks berat.. langsung ditesting.. :)

blackmamba

22 Oktober 2009 pukul 22.24

itu kode nya di taro di tag HTML nya apa langsung ditaro di postingannya ya bro...?

trus kalo mau taro icon di sebelum judul yang ada di sidebar itu gimana ya..?
ada tutorialnya gak..?

Dody FariaL

23 Oktober 2009 pukul 01.48

@Blackmamba : kodenya langsng ditaro dipostingan ato di sidebar aja sob..untuk icon di sebelah judul post tar deh sy buat postingannya..

gaby nisya

11 Februari 2010 pukul 12.58

thanks tutorialnya bgs mas dody

Cebol Namanya Ica

20 Maret 2010 pukul 20.54

kalau open sama closenya di ganti kok ga bisa yah?

Andri Budiman

9 Juni 2010 pukul 22.10

Makasih infonya ya boos, aye mau langsung iseng nih

marchparade

28 Juli 2010 pukul 10.20

gan ini kan kalo make postingan dr blogger ya?
ane kan make windows live writer, cara make spoiler'a gmn ya?

29 Juli 2010 pukul 06.50

@marchparade : taro di sidebar aja

Frzhrdynt

11 Agustus 2010 pukul 15.30

dari dulu ngincer ginian akhirnya ketemu jga :) Thanks ya...

Fachrin Aulia Nasution

29 Agustus 2010 pukul 09.10

KEBERAPAX YAH ANE GAN? hahahaha...gak dapet pertamax hahaha

hsajax

25 Oktober 2010 pukul 19.07

Working ^_^
Thanks and visit me back @_@

The Fantasy Blog | Romy Rafael dan Tv Online

3 November 2010 pukul 13.43

mangstab gan! udah ane coba!

Admin

5 November 2010 pukul 23.39

masih belum mengerti penjelasan cara buat spoiler.

bisa kirim kan jawabannya, saya harus taruk mana kode skrip tersebut ? di dalam postingan apa di dalam gadget html...