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

95 komentar:

  1. 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. ditaruh mn y spoilernya....??aq msh bingung..www.ismuromdhoni.co.cc

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

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

    BalasHapus
  5. 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. salam persahabatan..
    wah,,mantap nih ini yang saya cari,,
    kalau sempat main ke blog saya ya

    BalasHapus
  7. mas code tersbt taruh dimn :b:

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

    BalasHapus
  9. kalo bwat widget bisa gak nich ????

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

    BalasHapus
  11. Dapet ilmu lagi....
    mantep bro...

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

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

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

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

    BalasHapus
  16. Numpang menyimak ya ^___^

    BalasHapus
  17. mangstab gan...
    nice share yo.

    BalasHapus
  18. mangstab gan infonya...

    tq abis..cendolnya di warung gan

    BalasHapus
  19. thanx infonya..tukeran link ya..:)

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

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

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

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

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

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

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

    BalasHapus
  27. 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
  28. hmmm...
    mantap nih...
    taunya sih cuma bikin spoiler di kaskus aja,,
    hahahahaa

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

    BalasHapus
  30. salam kenal mas,
    kayaknya mantep nih

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

    BalasHapus
  32. terima kasih :)


    mampir2 ya bang :www.sayalupablognya.blogspot.com

    BalasHapus
  33. numpang belajar gan kolominput.blogspot.com

    BalasHapus
  34. wiiw,
    thanks bgt ya om :D
    bener2 membantu!! :D

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


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

    BalasHapus
  36. 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
  37. Thx gan...
    akhirnya berhasil juga... :a:

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

    BalasHapus
  39. thanks bro, sharing infonya...

    BalasHapus
  40. 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
  41. trims atas sharing2nya jadi tahu cara bikin spoiler

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

    BalasHapus
  43. 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
  44. :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
  45. kalo buat yang dibawah yang ada tandah panah kiri kanan gimana caranya

    BalasHapus
  46. Thanks Sharingnya....
    Langsung dicoba deh...

    BalasHapus
  47. gan yang baik hati numpang naro link ya..

    www.ade-code.co.cc

    BalasHapus
  48. Mantap nih tutornya, mau dicoba dulu ah
    Thanks ya

    BalasHapus
  49. Thanks gan infonya

    zonauntukberbagi.blogspot.com

    BalasHapus
  50. Tipsnya Ok,,,, saya coba dulu...

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

    BalasHapus
  52. makasi infonya, jgn lupa mmpir ke eMingko Blog

    BalasHapus
  53. 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
  54. Nice Inpohhhhhhhhhhhh GAnn...
    :d

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

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

    BalasHapus
  57. Whh semua tutornya bermanfaat mas bos...

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

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

    BalasHapus
  60. 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
  61. nice info gan... ternyata bisa di blog juga yah...

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

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

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

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

    BalasHapus
  65. trims infonya,

    tapi ditaruh mana script diatas...?

    maaf masih pemula

    BalasHapus
  66. Kemarin saya coba cari-cari spoiler akhirnyha ketemu juga

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

    BalasHapus
  68. thanks tipsnya, salam kenal sob...

    ess24.blogspot.com

    BalasHapus
  69. mantapp sangat nih tutor sangat membantu hehe

    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.