Cara Membuat Spoiler Di Blog

bunga mawar merah
Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler



Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.

• Spoiler Forum misalnya KASKUS:
[spoiler=judul spoiler]isi spoiler[/spoiler]

Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.

• Spoiler untuk blog/web:
Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

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

Kode HTML diatas akan memberikan hasil seperti dibawah ini:

Tentang bla..bla.bla..

isi spoiler...


kalau mengerti html silakan di costumize sendiri  ^-^

Label:

95 komentar:

  1. ASDF28 Februari 2010 pukul 16.31

    salam newbie (ane bos). bos ane kan kopi brta org n ada spoiler nya tp g bs tmpil. wktu itu prnh tmpil skrg tdk. http://azmi27jr.blogspot.com
    thnxz bos

    BalasHapus
  2. BELAJAR NGEBLOG28 Februari 2010 pukul 20.40

    ditaruh mn y spoilernya....??aq msh bingung..www.ismuromdhoni.co.cc

    BalasHapus
  3. alfi28 Februari 2010 pukul 21.06

    pertamaxxx..
    mas ad award tu ntukmu n jngn lpa diambil y..

    BalasHapus
  4. dadan ramdani2 Maret 2010 pukul 18.14

    Lam kenal dari Aku... http://pangandaraninfo.com

    BalasHapus
  5. website traffic3 Maret 2010 pukul 08.30

    Your blog is awe-inspiring. I have found many new things. Your way of staging is also fascinating. You have elected very incredible topic. I appreciated it.

    BalasHapus
  6. Amdhas3 Maret 2010 pukul 16.39

    salam persahabatan..
    wah,,mantap nih ini yang saya cari,,
    kalau sempat main ke blog saya ya

    BalasHapus
  7. Hairul5 Maret 2010 pukul 12.17

    mas code tersbt taruh dimn :b:

    BalasHapus
  8. Kumpulan informasi maya6 Maret 2010 pukul 02.09

    wah keren banget ni.. nambah ilmu lagi... makasi dah shere ilmunya

    BalasHapus
  9. agung7 Maret 2010 pukul 10.46

    kalo bwat widget bisa gak nich ????

    BalasHapus
  10. dniel gituloh21 Maret 2010 pukul 21.04

    ok bngets infonya...thx....
    www.dnielgituloh.co.cc

    BalasHapus
  11. konblok22 Maret 2010 pukul 15.14

    Dapet ilmu lagi....
    mantep bro...

    BalasHapus
  12. yudhie23 Maret 2010 pukul 13.58

    salam kenal...
    thanx sobat udah mau berbagi ilmu.

    BalasHapus
  13. blog Andry27 Maret 2010 pukul 16.24

    :e:

    BalasHapus
  14. Irfan Tanjun1 Mei 2010 pukul 17.05

    wah keren nih....

    BalasHapus
  15. aim3 Mei 2010 pukul 23.42

    thnks banget brader...
    loe emank jitu :e: :e: :e:

    BalasHapus
  16. Trasmianto10 Mei 2010 pukul 00.25

    mantab juragan... trims informasinya.. kunjungan perdana nih.. ditunggu kunjungan baliknya yaaauuwwww...

    BalasHapus
  17. Trasmianto10 Mei 2010 pukul 00.47

    waaaaaaaaaaa... tarimakasih juragan.... ijin modifikasi dikit dan silahkan liad hasilnya diblog saya

    BalasHapus
  18. Faris19 Mei 2010 pukul 16.08

    thanks tutorialnya

    BalasHapus
  19. osi26 Mei 2010 pukul 13.23

    Numpang menyimak ya ^___^

    BalasHapus
  20. RELOAD.ID24 Juli 2010 pukul 11.24

    mangstab gan...
    nice share yo.

    BalasHapus
  21. bayprakoso27 Juli 2010 pukul 18.55

    mangstab gan infonya...

    tq abis..cendolnya di warung gan

    BalasHapus
  22. Uncle Tommy31 Juli 2010 pukul 20.10

    thanx infonya..tukeran link ya..:)

    BalasHapus
  23. Anonim2 Agustus 2010 pukul 13.44

    tapi kalau dah ada readmore kan dah ga bisa...

    BalasHapus
  24. danwok6 Agustus 2010 pukul 17.22

    bro, thank you,
    http://cafepersonal.blogspot.com/

    BalasHapus
  25. Download Ebook Gratis | cara-blog | kumpulan bisnis online13 Agustus 2010 pukul 18.01

    mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

    BalasHapus
  26. Rey18 Agustus 2010 pukul 21.13

    terima kasih banyak atas tutorialnya. Sangat menambah wawasan. :)

    BalasHapus
  27. Penny Holowitz5 September 2010 pukul 00.18

    Anda memukul kuku di kepala dengan artikel ini. Saya benar-benar akan mengambil beberapa tips dan menerapkannya pada artikel saya.

    BalasHapus
  28. Jacob Gabrielle5 September 2010 pukul 22.35

    I just found your site and it is a GEM. You give great info and I really like the content.

    BalasHapus
  29. blog wahyu (putra bulian)6 September 2010 pukul 20.53

    ane suka postingnya bosss....

    BalasHapus
  30. blog wahyu (putra bulian)6 September 2010 pukul 20.54

    ane suka postingnya bosss....

    BalasHapus
  31. mayakom7 September 2010 pukul 01.23

    ok sob..saya akan mempraktekannya nih....
    thanks ilmunya....

    BalasHapus
  32. Jamie C13 September 2010 pukul 07.03

    Saya ingin berterima kasih atas upaya yang telah Anda buat dalam menulis artikel ini. Saya berharap karya terbaik yang sama dari Anda di masa mendatang juga. Bahkan kemampuan kreatif Anda menulis telah mengilhami saya.

    BalasHapus
  33. Bimobr10 Oktober 2010 pukul 14.17

    MANTABBBB :d:

    BalasHapus
  34. haritz28 Oktober 2010 pukul 20.27

    hmmm...
    mantap nih...
    taunya sih cuma bikin spoiler di kaskus aja,,
    hahahahaa

    BalasHapus
  35. Bilbul1 November 2010 pukul 16.00

    Thanks infonya...
    berita apa saja
    http://bilbulsama.blogspot.com

    BalasHapus
  36. qsew3 November 2010 pukul 17.17

    salam kenal mas,
    kayaknya mantep nih

    BalasHapus
  37. Panjulz15 November 2010 pukul 22.34

    makasih buat info na
    oh ya kalo bisa tuker link na sekalian mau nerima yang banner bos
    coz aye banner nih
    hehehe

    BalasHapus
  38. Cloudz18 November 2010 pukul 20.07

    waah makasih yaa gaan ^o^

    BalasHapus
  39. BSI131C01421 November 2010 pukul 18.07

    terima kasih :)


    mampir2 ya bang :www.sayalupablognya.blogspot.com

    BalasHapus
  40. About Girls (http://about-girlsz.blogspot.com)24 November 2010 pukul 00.02

    thanks for the tips

    BalasHapus
  41. G. R. M.27 November 2010 pukul 23.55

    numpang belajar gan kolominput.blogspot.com

    BalasHapus
  42. Syrus4 Desember 2010 pukul 16.09

    wiiw,
    thanks bgt ya om :D
    bener2 membantu!! :D

    BalasHapus
  43. Difa Irawan4 Desember 2010 pukul 16.59

    ane blom ngerti HTML gan..
    bisa diperjelas.? hehe


    mampir gan http://www.zegitiga.co.cc/

    BalasHapus
  44. Untitled9 Desember 2010 pukul 15.55

    :n:

    BalasHapus
  45. Freedownloaderz11 Desember 2010 pukul 03.56

    Tq Gan Info Spoilernya...

    BalasHapus
  46. test-blogging-today13 Desember 2010 pukul 07.47

    wets... makasi banyak nii gan.. :h:

    BalasHapus
  47. Anonim15 Desember 2010 pukul 14.42

    makasih infonya gan :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e: :e:

    BalasHapus
  48. Qin16 Desember 2010 pukul 07.33

    Terima kasih brooooo!!!!!

    BalasHapus
  49. Anonim20 Desember 2010 pukul 14.55

    Thx gan...
    akhirnya berhasil juga... :a:

    BalasHapus
  50. tukeran link yuk25 Januari 2011 pukul 10.36

    gan, mantap banget tutor nya, agan mau gak tukeran link dengan blog ane?

    BalasHapus
  51. adilahat27 Januari 2011 pukul 15.00

    thanks bro, sharing infonya...

    BalasHapus
  52. Blog Terbaru1 Februari 2011 pukul 04.38

    terima kasih mas atas artikel cara membuat spoiler di blog ini...saya kira dulu cuman bisa dibuat diforum-forum... ternyata bisa juga di blog toh..... :)

    BalasHapus
  53. amn-kun1 Februari 2011 pukul 06.15

    trims atas sharing2nya jadi tahu cara bikin spoiler

    BalasHapus
  54. software bali1 Februari 2011 pukul 18.32

    thanks infonya..saya coba ya!

    BalasHapus
  55. prwbw6 Februari 2011 pukul 19.53

    :e:

    BalasHapus
  56. Afrianto8 Februari 2011 pukul 11.02

    Terimakasih atas info yg sangat bermanfaat ini, dan sya sdh lsg terapkan..salam kenal

    BalasHapus
  57. Sigit11 Februari 2011 pukul 04.33

    thanks bro tadi saya copas buat blog wordpress saya...
    <a href="http://sigithebest.wordpress.com/> artikelnya membuat spoiler di blog free hosted wordpress </a> terimakasih

    BalasHapus
  58. Abdul Munawwir12 Februari 2011 pukul 14.24

    :a:
    :a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a::a:
    :a::a::a:

    BalasHapus
  59. PTCISME'BLOG15 Februari 2011 pukul 12.06

    mantap gan!

    BalasHapus
  60. sukariyanta17 Februari 2011 pukul 11.13

    kalo buat yang dibawah yang ada tandah panah kiri kanan gimana caranya

    BalasHapus
  61. ~~su manje~~~17 Februari 2011 pukul 21.01

    salam kenal sahabat...
    thanks sharing


    Jemput mampir blog saya...

    BalasHapus
  62. Rusman Nino19 Februari 2011 pukul 11.22

    Thanks Sharingnya....
    Langsung dicoba deh...

    BalasHapus
  63. Anonim21 Februari 2011 pukul 17.15

    gan yang baik hati numpang naro link ya..

    www.ade-code.co.cc

    BalasHapus
  64. Vindu28 Februari 2011 pukul 10.43

    Mantap nih tutornya, mau dicoba dulu ah
    Thanks ya

    BalasHapus
  65. Dewantara Satria2 Maret 2011 pukul 05.11

    Thanks gan infonya

    zonauntukberbagi.blogspot.com

    BalasHapus
  66. Nikmaya John3 Maret 2011 pukul 06.15

    Tipsnya Ok,,,, saya coba dulu...

    BalasHapus
  67. Semut18 Maret 2011 pukul 21.30

    dicoba dulu gan :D

    BalasHapus
  68. Ary_Putra20 Maret 2011 pukul 22.50

    Mantap gan infonya

    BalasHapus
  69. ALL iN2 April 2011 pukul 20.42

    spoiler keren pernah gw liat disini
    http://barump3.blogspot.com/

    BalasHapus
  70. eMingko Blog10 April 2011 pukul 08.56

    makasi infonya, jgn lupa mmpir ke eMingko Blog

    BalasHapus
  71. aandfx13 April 2011 pukul 03.50

    numpang tanya mas bro.. kalau mau nulis artikel yang ada code html seperti yang ada di atas gmn? apa mesti di encode dulu? saya coba pakai text area juga yang keluar visualnya? kenapa ya... bingung...mumet..
    mohon briefingnya...
    terima kasih...

    BalasHapus
  72. Afandi17 April 2011 pukul 09.57

    Nice Inpohhhhhhhhhhhh GAnn...
    :d

    BalasHapus
  73. Unknown19 April 2011 pukul 11.41

    ko w ttp gg da yg muncul spoiler.a ???

    BalasHapus
  74. Anonim19 April 2011 pukul 17.20

    :m:

    BalasHapus
  75. spy2223 April 2011 pukul 03.35

    ijin pake gan..... sekalian blogwalking... :D

    BalasHapus
  76. Rian Ap26 April 2011 pukul 13.15

    Whh semua tutornya bermanfaat mas bos...

    BalasHapus
  77. www.bagustv.com28 April 2011 pukul 15.18

    download mp3 terbaru dan movie, software terbaru, sms gratis, serta nonton tv streaming dan radio streaming di http://www.bagustv.com/

    BalasHapus
  78. Romadhon_byar11 Mei 2011 pukul 22.30

    O.k Gan ... ^_^ Visit To My Blog : http://ar310.blogspot.com/ ^_^

    BalasHapus
  79. ionlinerz25 Mei 2011 pukul 21.03

    wah gan..
    ud ane coba n bersahil..eh berhasil...
    thx gan..

    minat Toyota Limo ex taxi blue bird??

    visit ya : www.ionlinerz.co.cc

    thx gan..

    BalasHapus
  80. Hady Gusti Randa31 Mei 2011 pukul 14.10

    numpang ngopas om ..

    BalasHapus
  81. Shofiyyuddin2 Juni 2011 pukul 13.50

    thanks ni ngebantu bgt

    BalasHapus
  82. JIM3 Juli 2011 pukul 08.22

    nice info gan... ternyata bisa di blog juga yah...

    BalasHapus
  83. Illyaz4 Juli 2011 pukul 13.14

    Nice artikel gan :)

    BalasHapus
  84. Bagaskara Wisnu Gunawan (WkarSC)8 Juli 2011 pukul 19.05

    kalo mau kayak kaskus gitu bisa ga? :c:

    BalasHapus
  85. wildan26 Juli 2011 pukul 15.56

    Terimakasih infonya. Tapi belum saya coba di blog (Wordpress). Saya baru coba di HTML (local, alias di komputer (non internet)).

    BalasHapus
  86. blade_ext27 Juli 2012 pukul 07.10

    thx info nya bg. dan udh ane coba di salah satu postingan ane di blog. berhasil bg . thx ya :D

    BalasHapus
  87. Khabaran Unik27 September 2012 pukul 00.16

    Thanks ya Gan atas Tutor nya..., moga sukses terus ne blogsite...

    Visite back ya Gan : http://khabaranunik.blogspot.com/

    BalasHapus
  88. Cara cara dot blogspot10 Oktober 2012 pukul 22.09

    Sangat bermanfaat gan.. thanks infonya

    BalasHapus
  89. salsabila22 November 2012 pukul 20.19

    trims infonya,

    tapi ditaruh mana script diatas...?

    maaf masih pemula

    BalasHapus
  90. Ertiga Semarang20 Januari 2013 pukul 01.29

    Kemarin saya coba cari-cari spoiler akhirnyha ketemu juga

    BalasHapus
  91. mahmud fc26 Maret 2013 pukul 15.14

    nice dech..
    jd nambah ilmu nichhh
    thank gann.....

    BalasHapus
  92. eSs2412 Juni 2013 pukul 14.49

    thanks tipsnya, salam kenal sob...

    ess24.blogspot.com

    BalasHapus
  93. pras4 Juli 2013 pukul 15.39

    Makasih infonya gan

    BalasHapus
  94. Unic29.Com2 Oktober 2013 pukul 20.43

    mantapp sangat nih tutor sangat membantu hehe

    BalasHapus
  95. The sukualam27 Desember 2013 pukul 09.37

    mantab gan! salam kenal

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.

Langganan: Posting Komentar (Atom)