Cara Membuat Spoiler di Blogger/Blogspot


Tips dan trik membuat spoiler ini sebenarnya sudah banyak yang posting dan share. Akan tetapi, tidak ada salahnya juga jika saya ikut share tentang spoiler dan sedikit tentang kegunaannya.
Spoiler dibuat dengan menggunakan javascript button. Sedangkan untuk menyembunyikannnya digunakan properti CSS display, dalam hal ini, "display:none;". Fungsinya ada banyak sekali, diantaranya untuk memperpendek teks atau gambar yang sangat besar/panjang dan memakan space halaman atau untuk menyembunyikan kejutan bagi pengunjung (maka seringkali disebut pula sebagai "peek-a-boo", Indonesianya kurang lebih, "ci-luk-ba!", hehe)
Pada posting blog, spoiler dapat digunakan untuk memperpendek panjang halaman sementara sebelum di-klik oleh pengunjung, sehingga tampak tidak ruwet.

Spoiler juga dapat digunakan untuk menghibur pengunjung juga loh, misalnya seperti ini:

1. Copy dan gunakan script berikut:
<div id="spoiler" style="display:none">
Konten Yang Disembunyikan
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>
Kostumisasi spoiler:
- Ganti Konten Yang Disembunyikan dengan konten (text, url, url gambar, script dll) yang ingin disembunyikan.
- Ganti title Klik untuk melihat/menyembunyikan dengan title sekehendak anda. Title berfungsi memberi informasi ketika mouse di hover di atas tombol spoiler.
- Ganti Buka/Tutup dengan teks sesuai keinginan, teks tersebut akan menjadi perintah yang terlihat pada tombol spoiler.
2. Untuk membuat spoiler di badan posting, buat spoiler melalui menu Edit HTML, letaknya dibagian pojok kanan atas kotak posting, semua editing dilakukan pada menu tersebut, jika tidak maka script tidak akan bekerja.
3. Jika ingin membuatnya di widget, pilih menu "HTML/Javascript".

Enjoy your Peek-A-Boo Spoiler!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

39 comments:

  1. ini sumber aslinya dari mana yah? bingung aku, sudah lama mau posting beginian tapi ga dapat sumber awal

    ReplyDelete
  2. wah, kalo untuk trik-trik javascript macam spoiler, select all, dll sudah ada sejak jaman dulu bro, sejak 2002 kalo gak salah, and pembuat asli script tsb susah dilacak lg.yang penting kalo bikin posting tentang script2 spt ini, bentuk narasi dan esensinya, serta script-nya bisa dipahami dan dibuat sendiri dan ga copas mentah2 aja... kalo yang dimaksud tentang artikel (bukan script-nya), tentu saja artikel ini saya buat sendiri.
    kecuali kalo copas semuanya mentah2, harus pake sumber....

    ReplyDelete
  3. mantap pak....
    udah di coba dan berhasil...
    terima kasih pak....
    jangan lupa mampir to me....

    ReplyDelete
  4. sip. saya sudah mampir tadi and berfungsi dengan baik, tapi belum bisa komen cuz page load blog mu berat bro, jadi internet saya yang lemot ini lama banget nge-loadnya, coba dikurangin dikit ya berat blognya. Good Luck, keep blogging.

    ReplyDelete
  5. makasih pisan mas... blog saya jadi rada cantik hehehee........

    ReplyDelete
  6. Kawan, saya sedang mencari artikel tentang cara membuat spoiler di blogger/blogspot. Kebetulan saya mendapatkan artikel ini. Kalau boleh, saya mau izin copas. Terima kasih. :)

    ReplyDelete
  7. @admin: yup, you're welcome :D

    @Baharuddin Aziz: Boleh, asalkan gunakan kode link di atas sebagai sumber artikel, masukkan melalui edit HTML posting.

    ReplyDelete
  8. Terimakasih Tutorialnya kang... sangat membantu, akan saya praktekkan, kalo tidak berhasil, minta bimbingannya lagi ya....

    ReplyDelete
  9. GAN KO..KLO DITAMBA LINK TIDAK BISA YA...
    GIMANA TU..SOLUSINYA SUPAYA BERURUT PERKALIMAT..
    CONTOH :
    A
    B
    B
    B
    B
    jln2 ke blogku ya..benahi ni.? http://dedidavidbala.blogspot.com/

    ReplyDelete
  10. Bisa kalo diisi link, tinggal dibuat tag a saja. setelah link2 terbuat, buatlah menjadi list dengan menggunakan HTML list.

    cara buat link liat disini:
    Cara Membuat link (Hyperlink)

    untuk cara bikin list/daftar, liat disini:
    Cara Membuat List HTML & Menu Sederhana

    Setelah semua kode jadi, tinggal ganti "Konten Yang Disembunyikan" dengan kode/list link tersebut.

    ReplyDelete
  11. mkasih mas,,., atas tutor blogger nya,.,.

    maaf aku komen hanya satu di posting ini mas,.,.
    gx mungkin kan di semua posting aku komen,.,
    mkasih mas

    ReplyDelete
  12. wah yang penting bukan komennya bro, tapi kunjungan anda dan membaca artikel sudah cukup membuat saya bahagia. SO, its okay :D yup, terima kasih kembali.

    ReplyDelete
  13. mas kalo masukin gambar gimana ya?? kok di blog saya, yang muncul malah url gambarnya bukan gambarnya..

    ReplyDelete
  14. thanx for spoiler.... sangat membantu untuk menyembunyikan beberapa konten di bulan puasa ini :D

    ReplyDelete
  15. @angga: untuk memunculkan gambar gunakan:
    <img border="0" src="urlgambar.jpg"/>

    ReplyDelete
  16. wah... gambar contohnya bikin ribut neh!!!

    malem" buka blog agan, eh.. dapet gambar genderuwo!!! wkkwkwkw

    o ye.. thanks informasinya ya :D

    ReplyDelete
  17. ijin share ya bang ...

    blog q .. http://fromkost.blogspot.com/

    ReplyDelete
  18. Gan... bisa minta request?
    saya mencari script utk capture rating dari imdb.com.
    cari di google dapatnya situs ini http://ycouriel.blogspot.com/2010/06/get-imdb-movie-rating-using-javascript.html.
    saya bingung utk lokasi penempatan scriptnya...
    bisa tolong ajarin saya?

    thanx b4...

    ReplyDelete
  19. super sekali, saya suka pake spoiler ini

    ReplyDelete
  20. pak, klo divnya dibawah bisa g? jadi tombol spoilernya tetep di atas?

    ReplyDelete
  21. izin menyimak sob .....
    nice info ...

    Kunjungi Juga Blog Saya http://dham-gamerz.blogspot.com

    ReplyDelete
  22. eh mau nanya mas, bagaimana caranya membuat spoiler dalam spoiler?

    ReplyDelete
  23. oia satu lagi. tak coba pake kode diatas, untuk 2 spoiler. nah pada spoiler kedua, yg kebuka malah spoiler yg atas,

    ReplyDelete
  24. alhamdulillah problem solved. tinggal dibuat beda spoilernya ya mas? thanks anyway

    ReplyDelete
  25. thanks tipsnya om... :)
    o, iya, boleh nanya, gimana caranya ganti gambar "Link to this post" yang ada dipojok kiri itu?

    trims ... :)

    ReplyDelete
  26. thanks kaka tips nya ikut minta ya ^_^

    ReplyDelete
  27. gan klo spoilernya ditaruh ketengah gimana caranya ??

    Thanks gan, udah work.. Tadi sempet ngak work krn ane bikinnya bukan dibagian HTML

    ReplyDelete
  28. Wess ..
    Makasih Ya Mass Bro !!!
    Akhirnya Ketemu Juga !!
    Jangan Lupa Sob Kunjungan Balik Ke Blog Saya !!

    ReplyDelete
  29. ane dah praktek,,thanks banget gan atas infonya

    ReplyDelete
  30. BAgus om spilernya
    Gak ada garis horizontalnya
    emang paling yahud ni buka rahasia

    ReplyDelete
  31. makasih bozz info
    moga sukses slalu ya

    ReplyDelete

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.