Cara Membuat Spoiler

starsplash 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:
Letakkan kode script, HTML dan teks anda disini

 

 

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

 

<br>
</div>
</div>
</div>

 

Keterangan :

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

Selamat mencoba ! Happy

Berlangganan artikel terbaru via Email
Artikel Lainnya :

41 comments

30 September 2009 pukul 20.21

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

1 Oktober 2009 pukul 05.16

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

1 Oktober 2009 pukul 13.55

Thnks berat.. langsung ditesting.. :)

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..?

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..

11 Februari 2010 pukul 12.58

thanks tutorialnya bgs mas dody

20 Maret 2010 pukul 20.54

kalau open sama closenya di ganti kok ga bisa yah?

9 Juni 2010 pukul 22.10

Makasih infonya ya boos, aye mau langsung iseng nih

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

11 Agustus 2010 pukul 15.30

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

29 Agustus 2010 pukul 09.10

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

25 Oktober 2010 pukul 19.07

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

mangstab gan! udah ane coba!

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...

6 November 2010 pukul 08.50

@HOMESICK : bs dipostingan, bs juga dlm gadget/sidebar

10 Desember 2010 pukul 08.47

mantap

20 Desember 2010 pukul 13.49

thanks boz untuk tutorialnya

2 Januari 2011 pukul 05.38

wah.. mantap sob

7 Januari 2011 pukul 09.50

thanks banget sob

15 Januari 2011 pukul 20.48

berhasil mas,, trma kasih ,,

29 Januari 2011 pukul 16.12

Salam Perkenalan dulu deh

14 Februari 2011 pukul 05.28

hmm,,,
makasih atas infonya
^_^b

10 Maret 2011 pukul 19.32

ok deh aku coba dulu bisa ga?

15 Maret 2011 pukul 12.05

thx's ya tutorialnya mantap nieh....aku dah coba dan berhasil..

20 Maret 2011 pukul 14.18

bagus gan ijin makai ilmunya gan

28 Maret 2011 pukul 01.09

bermanfaat sekali bang

30 Maret 2011 pukul 11.36

sangat bermanfaat gan

1 April 2011 pukul 01.40

jam tangan unik yang sedang buming di korea dan jepang"tokyoflash watch: lebih jelasnya kunjungi blog kami http://jam-tokyoflash.blogspot.com

27 Mei 2011 pukul 00.56

kalo dimasukin gambar bisa ya gan? caranya sama ya?

3 Juni 2011 pukul 13.32

makasi sob... ane belajar dari sini bikin spoilernya... hehehhe

13 Juli 2011 pukul 20.19

nice inpoh, ane k posting

28 Juli 2011 pukul 05.41

Keren tutorialnya, saya coba ya gan cara bikin spoiler nya..sips

2 September 2011 pukul 18.49

seep dpet trik ini juga ^^ http://caratrikblog.blogspot.com/

12 September 2011 pukul 16.42

Makasih banyak SOB :) :)

21 September 2011 pukul 08.25

ajib gan, mantap bgt tipsnya

22 Oktober 2011 pukul 10.53

Mantaap,,setiap searching nemu blog ini,,,


termiakasih sekali lagi,,,
^_^

29 Oktober 2011 pukul 15.41

asseeeeeeeek tambah ilmu nehh

sek punya gua juga yah

www.e-chan.co.cc

8 Februari 2012 pukul 19.08

bukannya postingan sekarang ga bisa pake kode HTML lg yah ?

Kalo untuk spoiler komentar engak ada ya sobat.

31 Agustus 2012 pukul 22.03

Spoiler... Kayak Kaskus... heheh
Tapi Bagus Bisa Di Tempelin Di Blog...

Posting-nya keren keren....

Posting Komentar

Reader Community

Recent Comments