tomipurba [dot] net

My Online Notes

Spoiler on The Blog

Bagi para blogger yang aktif dalam dunia per-foruman (Forum maksudnya) pasti sudah sering mendengar, melihat, mengetahui bahkan merasakan spoiler. Spoiler adalah script atau baris perintah kode yang dapat menampilkan tombol yang ketika di-klik akan mengeluarkan menu pulldown. Biasanya digunakan untuk menyimpan teks, gambar atau yang lainnya yang terlalu panjang yang sifatnya opsional dapat dilihat atau tidak. Trus apa fungsinya?? Fungsinya yaitu dapat menghemat bandwith atau mempercepat loading halaman blog kita karena tidak perlu meload teks atau gambar yang kita spoiler lagi. Mau tau gimana cara buatnya?

Di salah satu forum terkenal di Indonesia, yaitu Kaskus pernah ditampilin cara membuat sebuah spoiler yaitu dengan cara menyisipkan kode berikut di postingan blog anda :

<div>
<input type="button" value="Show" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>

<div style="background: #AAAAAA; margin: 10px auto;
border: 1px solid #000;
padding: 5px;">
<div style="display: none;">
ISI YANG AKAN DI SPOILER
</div>
</div>

Tulisan “Show” dan kode warna CSS bisa diganti sesuai warna themes kita. Bagian yang mau di-hidden di bagian “ISI YANG AKAN DI SPOILER” bisa diisi gambar atau tulisan.

Itu cara pertama dan agak ribet karena kita harus menyisipkan kode tersebut hehehe :D Cara kedua dan menurut saya lebih mudah (wordpress mania :D ) yaitu dengan menginstal plugin Advanced Spoiler yang dapat di download di [spoiler effect="simple"]http://downloads.wordpress.org/plugin/advanced-spoiler.2.01b.zip[/spoiler]

Mengapa lebih mudah? Karena ada tambahan tombol spoiller di menu visual add posting :) Kita tinggal klik aja tuh tombol, trus pilih animasinya dan kata-kata yang akan digunakan,  lalu tinggal klik OK hehehe

Untuk contohnya bisa dilihat diatas.. Langsung diterapkan :D

Go Go Blogging :d

tomi | January 5th, 2011 | 32 Comments
      Pin It

Tagged with: blogkaskusspoilertipstriktutorial



  1. Uchan says:

    Udah ngetes isi spoiler di-load juga gak mas? Kalo spoiler di forum gambarnya juga langsung di-load sama FF meski belum diklik

    Btw thx dah mampir ke blog saya :13:

  2. tomi says:

    @uchan : udah bro.. spoiler yang bawaan plugin wordpress sama yg dapat dari kaskus,, isi spoiler di load dl meskipun blm di klik

  3. Uchan says:

    Ok sudah di-link balik juga, thx a lot

  4. tomi says:

    thanks ya uchan.. salam kenal..

  5. jurug says:

    keren juga ya..

    syaa mau nanya nie :D

    kalau teks di spoiler itu bisa terbaca mbah google gak sih ??

    :mrgreen:
    .-= jurug´s last blog ..BlackBerry Bold 9700 Onyx =-.

  6. Ooh shoot i just wrote a large comment and as soon as i strike reply it came up blank! Please inform me it worked right? I dont want to submit it again if i do not have to! Either the blog glitced out or i’m an idiot, the second option doesnt surprise me lol. thanks for an excellent weblog!

  7. miss dewi says:

    kok g bs ya?

  8. Cahya says:

    Kadang saya bingung, lalu usabilitas spoiler itu di mana ya? Padahal kan lebih enak ditampilkan semua.

    • tomi says:

      saya juga bingung mas.. tapi kalau menurut saya, fungsinya adalah untuk menyembunyikan gambar yg mgkn ukurannya cukup besar. Jadi tak perlu mereload terlebih dahulu dan tentunya jadi mempercepat loading blog

      • Cahya says:

        Kalau memang gambarnya besar, lebih estetik menurut saya dibuat thumbnail-nya, sementara kalau diklik akan menuju halaman yang memuat gambar ukuran besarnya.

  9. Kalau gambarya kebesaran lebih baik di Spoiler biar ga makan tempat :nerd

  10. cahjo says:

    owww, baru tau spoiler kyk gtu to…hehe, maklum jarang ngaskus…sip2…spertinya berguna..saya coba dulu deh master.. oiya skalian kenalan sama blog saya…sudah jadi tinggal ngisi aj, monggo berkungjung…minta saran ya master…wkwkwkwk..
    :toast

  11. Tutorial blog says:

    Ko ni postingan dah lama ya mas,ternyata sekarang saya bisa berkunjung ,kemarin-kemarin ga bisa.lagi pindahan ya :ngacir:

    • tomi says:

      hehehe… promote older post with no traffic mas… fitur baru plugin STT2

      • Bisnis Online internet says:

        Mantep juga ya ternyata ST12 :ngakak .Saya belum sempat nengok fiturnya yang baru,upgred sih udah :)

  12. Darin says:

    Oooh baru tau, ternyata begitu ya jurusnya. Iya, saya jg sering nemuin di Kaskus spoiler2 itu. Gunanya ya memang untuk menghemat tempat, juga memancing pembaca tuk mengkliknya :D

  13. mas-tony says:

    wah saya gaptek nih mas, saya jarang masuk ke forum so tidak terlalu memperhatikan hal diatas, tapi bermanfaat juga infonya

  14. PressByte says:

    sepertinya lbh gampang langsung pakai pluginnya ya gan..

  15. Aku juga pke plugins Advanced Spoiler

  16. @helgaindra says:

    makasih infonya bang
    langsung donlot pluginnya deh

  17. bowo says:

    ak malah blm pernah gunain plugin ini bozz :mewek

  18. chyardi says:

    Salam kenal mas Tomi, bagus nih artikelnya, thanks ya atas infonya…


Comments are closed.

  • Berita Terbaru

  • Komentar Baru

  • Langganan Artikel

    Silahkan masukkan alamat email teman-teman untuk berlangganan artikel dari blog ini. Jangan lupa konfirmasi langganan artikel dengan cara klik link aktivasi yang dikirimkan ke inbox email yang didaftarkan. Terima Kasih. Go Go Blog!

    Enter your email address:

    Delivered by FeedBurner

  • Blogger Jogja

  • Visit Here