Spoiler Tag for Blogspot

Sometimes I want to write a movie review post on this blog, like this one (written in Bahasa Indonesia). And sometimes it's hard for me not to tell the interesting plot of the movie. It could be a spoiler. Maybe you've also written any review which contained spoilers.

According to wiktionary, spoiler is a document, review or comment that discloses the ending or some key surprise, or twist in a story. We should warn about spoilers before telling them, so that readers who wish to do so may experiece the surprises for themselves.

Spoiler Alert - © xkcd

But how should we write a good spoiler warning when we want to write the review in Blogspot? Is it enough to write "Watch out spoiler!!" ?

I remember that InvisionBoard (or maybe other BBs) has spoiler tag, like this [spoiler] this is content of spoiler [/spoiler], so that the content of spoiler is not displayed directly to the reader. If the readers want to show the spoiler, they can click the warning and the spoiler will be displayed.

Nah, I was inspired by that spoiler tag to be applied in blogspot post. So, I do a little hack and here is the result.

» Click to show Spoiler - click again to hide... «


How to do create a "spoiler tag" for Blogspot?

1. Edit your Blogspot layout (Layout -> Edit HTML).


Find this code

]]></b:skin>
Then put this code right before that code.

.spoilertop{
    background: #E4EAF2;
    border: 1px dotted #000;
    border-left: 4px solid #8394B2;
    color: #000;
    font-weight: bold;
    font-size: 10px;
    margin: 8px auto 0 auto;
    padding: 3px;
    text-decoration: underline;
}
.spoilermain{
    background: #FAFCFE;
    border: 1px dotted #000;
    border-left: 4px solid #8394B2;
    border-top: 0;
    color: #465584;
    padding: 4px;
    margin: 0 auto 8px auto;
}
That is the CSS code for our spoiler section.



2. Find this code on your HTML layout

</head>
Then, put this code right before that.

<script language="JavaScript" type="text/javascript">

function openClose(id) {
    var obj = "";
    if(document.getElementById) obj = document.getElementById(id).style;
    else if(document.all) obj = document.all[id];
    else if(document.layers) obj = document.layers[id];
    else return 1;                        

    if(obj.display == "") obj.display = "none";
    else if(obj.display != "none") obj.display = "none";
    else obj.display = "block";
}
</script>
3. Go to your 'create post' page. Whenever you want to create a spoiler content, click tab 'Edit HTML' above the text editor for creating new post, then put this code.

<div class="spoilertop" onclick="openClose('YOURSPOILERID')"> » Click to show Spoiler - click again to hide...  « </div>
<div class="spoilermain" id="YOURSPOILERID" style="display: none;">  THIS IS YOUR SPOILER CONTENT </div>
The result will be like this:

» Click to show Spoiler - click again to hide...  «

You may change the "YOURSPOILERID" with another text, but it should be unique for every spoiler content in your whole blog.

That's all.. Now you're safe to write any spoilers on your beloved Blogspot.

cheers...

40 comments :

  1. @petra:
    kan memang terinspirasi dari InvisionBoard.. :P

    ReplyDelete
  2. pak anggriawan, kok bentuk hide textnya kayak dibox gt? klo ga mau dibox alias gada border gmn? Thx

    ReplyDelete
  3. @Nene:
    ubah saja kode css nya (langkah 1)
    ubah/hapus baris yang mengandung kata 'border'
    contohnya, jadi seperti ini:

    .spoilertop{
    background: #E4EAF2;
    color: #000;
    font-weight: bold;
    font-size: 10px;
    margin: 8px auto 0 auto;
    padding: 3px;
    text-decoration: underline;
    }
    .spoilermain{
    background: #FAFCFE;
    color: #465584;
    padding: 4px;
    margin: 0 auto 8px auto;
    }

    ReplyDelete
  4. satu lagi pak...kalo mau ubah gambar background, sama gambar side background gmn?

    ReplyDelete
  5. oya pak....itu pas click spoiler ato yg kayak Hide, kok kursor mousenya bentuk text (dgn kata lain btknya "I"? Kalo mau bentuk tangan nunjuk gmn?

    ReplyDelete
  6. @Nene:
    ubah gambar background, caranya: cari saja .body { di bagian kode css (kode seperti langkah 1), lalu tambahkan kode berikut di bawahnya
    background: url(alamat-url-ke-gambar-anda)
    misalnya, jadi seperti ini:
    body {
    background:url(http://www.google.com/intl/en_ALL/images/logo.gif);
    }

    gambar side background?? maksudnya background di sidebar??
    kalau itu maksudnya, itu sangat tergantung dengan kode html nya
    jadi tidak bisa generik untuk semua desain html :)

    mengenai yg ganti kursor, tambahkan saja cursor: pointer; di bagian .spoilertop
    misalnya, jadi seperti ini:
    .spoilertop {
    cursor: pointer;
    background: #E4EAF2;
    color: #000;
    font-weight: bold;
    font-size: 10px;
    margin: 8px auto 0 auto;
    padding: 3px;
    text-decoration: underline;
    }

    ReplyDelete
  7. gbr backgroundnya musti diupload dulu ga? saya punya di mediafire...ato musti ada di PC?
    Iya maksudnya gbr buat diside...caranya gmn?
    Thx atas help pointernya :D

    ReplyDelete
  8. saya udah coba pake search image, copy alamat webnya trus coba dibackground...gambarnya gak muncul...ap musti diupload di photobucket? kalo lewat mediafire bisa ga?
    Kalo iya, gmn kodenya?
    Thx yah Pak ^^

    ReplyDelete
  9. oyah, selain itu formatnya musti JPEG apa GIF? Makasih nih pak, sori ngerepotin >.<

    ReplyDelete
  10. emm...saya ralat pertanyaan sebelumnya...ternyata saya bisa bikin background :D :D ....tapi... gbrnya kehalang ama header ama artikel postnya >.< .... biar kelihatan tembus pandang gmn pak? en gbrnya ga full screen...biar full screen gmn pak meski sepjg apapun artikel ato posting replynya?

    ReplyDelete
  11. saya ralat lg pak...saya udah nyoba buat background image sebyk 2 kali...sebyk 2 kali pulalah saya mengalami error dan anehnya percaya ga percaya ga bisa diclear edit....sebyk 2 kali pulalah saya dikerjai sama masalah background image ini...sebyk 2 kali pulalah saya harus ganti template skin blog saya, dan sebyk 2 kali pulalah saya PUSINGGGGGGG.
    Akhirnya saya pake template skin yg normal aja (hanya warna polos) dan saya hanya memakai header image....oya pak mo nanya...
    gmn pak cara nge"sort" artikel posting yg saya buat? bukan comment loh ya pak. Jd maksudnya misal begini :
    artikel 5
    artikel 4
    artikel 3
    artikel 2
    artikel 1
    saya mo ngesort urutan dr atas ke bawah jd 1 s/d 5 ATAU kaya gn
    artikel 1
    artikel 3
    artikel 2
    artikel 5
    artikel 4
    nah gmn pak caranya? makasih loh pak atas saran Hide-nya...oya pak satu lg...itu kan Hide jdnya btknya kayak di dlm kotak gt...nah kalo mo dibuat seolah2 menyatu dengan page asal gmn? alias no border kiri-kanan-atas-bawah?
    Thx pak ^^

    ReplyDelete
  12. @Nene:
    wah, banyak sekali pertanyaanmu, semoga poin-poin berikut menjawabnya:
    1. gambar untuk background harus diupload terlebih dahulu :)
    2. post "tidak" bisa direverse :D
    3. "hide"nya ga mau di dalam kotak? coba hapus baris pada langkah 1 yang ada kata background

    ReplyDelete
  13. thx yah pak atas tips border hidenya....setelah bbrp kali research akhirnya saya tau gmn cara ngatur urutan artikel yg telah kita buat (bukan comment). Caranya adalah : (wah kok jd saya nih tokoh utama yg ngejelasin sesuatu ^_^ sorry nih yah pak..sekedar sekilas info ajah :P )
    1. Pertama klik Posting trus ke Edit Posting.
    2. Terus klik Edit di salah satu artikel yg anda misal ingin jadikan di urutan pertama
    3. Terus klik antara Edit HTML atau Compose (terserah...ga masalah yg mana juga)
    4. abis itu klik Post Options yg ada di pojok kiri bawah edit box
    5.Arahkan kursor ke Date/Time
    6. Disitu tertulis waktu kamu membuat pertama kali artikel tersebut...rubah tanggalnya menjadi maju 1 tahun berikutnya
    misal : dari 11/17/2008 (format urutan default tanggal adalah month/date/year) menjadi 11/17/2009
    7. Klik save template. Dan lihat hasilnya. Artikel tersebut menjadi urutan pertama dari blog anda
    8. Untuk membuat salah satu artikel menjadi urutan ke 2, lakukan hal yg sama seperti tadi pada artikel lain, hanya rubah tanggalnya menjadi mundur 1 hari
    misal: artikel no 2, default tglnya adalah 11/17/2008, ubah menjadi 11/16/2009
    9. Hasilnya artikel tersebut menjadi urutan no.2
    10 Dan begitu seterusnya ^^
    Regards
    Nene
    :D :P

    ReplyDelete
  14. @Nene:
    ah, pakai cara yang itu.. -__-"
    itu pasti hasil googling kan.. :P
    sengaja gak saia kasi tau soalnya (saia rasa) kurang elegan.. :D hehe..

    ReplyDelete
  15. @Nene:
    kenapa saya bilang kurang elegan? karena teknik reverse post seperti itu akan mengacaukan archive..
    bagaimana cara melihat daftar post pada bulan tertentu, padahal tanggal publishnya kita ubah manual mundur seperti itu.. <_<
    nanti kalau saia menemukan cara yang tepat, anda orang pertama yang saia kasi tau deh.. ;)

    ReplyDelete
  16. maksudnya archive jd kacau apa yah? apa tar artikel saya tar jd error? kan tujuan awalnya kan cuman mau ngatur tata letak artikel, yg mana yg dijdkan proritas bg si penulis dgn yg tdk?
    well, anyway nanya lg nih...eng sebenernya saya blom ngalamin kejadian gini...misal ada artikel sprt begini :
    artikel 1
    artikel 2
    nah di artikel 1 ada satu ada satu bagian yg mo dijdkan hide...nah trus mnrt kata bpk di bagain "Your spoiler Id" misal saya taruh kata Eternal
    nah trus di artikel 2, (jd artikelnya beda tempat) ada satu lg bagian yg ingin saya Hidekan, tp ternyata misal kebeneran Your Spoiler Idnya sama yaitu Eternal, padahal isinya beda...Pertanyaan :
    1. Apa yg bakal terjadi?
    2. Kalo misal bakal error, berarti mau ga mau musti ganti spoiler id dunk?
    3. Kalo misal di artikel 1 saya taruh Eternal!, trus di artikel Eternal!!, itu dah dihitung ID beda kan?
    Thx pak atas saran and pertolongannya ^^

    ReplyDelete
  17. @Nene:

    tau archive kan? itu loh, contohnya ada di sidebar blog saya ini..
    archive untuk mengelompokkan post berdasarkan bulan dipublishnya suatu post..
    kalau tanggal publishnya diubah-ubah secara manual kan archivenya ngaco..
    kalau anda rasa ga butuh fitur archive sih it's okey, no problem with that method.. ;D

    seperti yg saia tulis di atas, "You may change the "YOURSPOILERID" with another text, but it should be unique for every spoiler content in your whole blog."
    jadi harus beda semua.. kalau nggak, ntar saat anda klik 'hide' maka semua area spoiler yang ber-id sama dengan 'hide' yg diklik akan ditampilkan/disembunyikan..

    ReplyDelete
  18. Nah lho...kalo udah gn kasusnya gmn dunk, saya ubah lg tglnya?
    apa tar pas taun depan (krn saya buat maju jd tahun depan) tar pd error dunk artikel saya semua >.<

    ReplyDelete
  19. nanya lg pak....saya dah baca bbrp buku, katanya kalo blog kt mo dikenal lebih luas and lbh rame, musti pake RSS Feed ama google webmasters....Sebetulnya saya agak bimbang, apakah RSS Feed / Google Webmasters / Google Adsense kita musti bayar? Klo musti bayar, yg mana yg kita musti bayar, trus bayarnya gimana?

    ReplyDelete
  20. @Nene:
    both of them are free services :)

    ReplyDelete
  21. nanya lg pak...kalo mau buat artikel dalam artikel gmn? Misal kayak yg biasa di forum2...contoh :
    General Talk
    Topik 1
    Topik 2
    ...dst
    Jadi General Talk itu 1 artikel. Trus Artikel 1 ato 2 itu artikel lain lg, tp utk ngakses ke artikel 1 ato 2, kita musti masuk ke General Talk, abis itu kita ngeklik Topik 1 ato 2, trus kita bakal di"transfer" ke halaman baru yaitu artikel topik 1 ato 2. Oleh karena itu, di masing2 artikel (General Talk, Topik 1, Topik 2), punya comment box tersendiri..
    Well..gmn pak? maaf nih nanya molo soalnya saya masi cupu en gk gt ngerti soal masalah komputer >.<

    ReplyDelete
  22. @Nene:
    kalau mau persis ky gitu, blogspot jelas ga bisa.. ;D
    ujung-ujungnya, bikin saja 3 post (general talk, topik 1, topik2), lalu di post 'general talk' dikasi link menuju post-post lainnya yg terkait.. ;D

    ReplyDelete
  23. thanks for sharing!
    it helps a lot! XD

    ReplyDelete
  24. hallo pak dah lama ni ga nanya
    1. Gimana pak caranya masukin lagu ke blog. Jadi begitu kalo ada yg masuk ke blog langsung otomatis mainin lagu
    2. Lanjut dari no.1, Daftar lagunya bisa ga dari koleksi lagu kita? Maksudnya dari komputer kita?
    3. Lanjut lg dari no.2, kalo bisa, bisa ga lagunya dishuffle? Jadi setiap kali orang masuk lagunya beda. Misal si A masuk blog jam 2, lagu yg dimainin otomatis lagu X, trus A masuk lagi jam 3, lagunya ganti lagi otomatis jadi lagu Y?
    4. Nyambung dari no.3, kalo misal ga bisa, bisa ga misal yg masuk bisa milih sendiri lagunya dari daftar playlist? Jadi misal si A tadi mau ganti lagu, terus ada kayak tombol drop down, pilih lagu, trus dimainin deh tu lagu. Bisa ga pak?
    Makasih pak atas bantuan yg dulu2
    PS: anyway cara yg elegan buat nyusun artikel semau kita dah ketemu lom pak? :D
    PSS : Met Natal and Happy New Year 2009 yah pak ^_^
    Regards
    Nene

    ReplyDelete
  25. @Nyappy:
    your welcome.. :)

    @Nene:
    aduh.. Anda ini sudah keseringan out-of-topic deh.. -_-'
    coba googling dulu.. ;)

    ReplyDelete
  26. makasih bos, ilmunya
    sekali coba, walau agak lama sih utak atiknya akhirnya bisa juga...

    jadi blog saya berkelas .. hehehe

    http://soccer-xtreme.blogspot.com

    ReplyDelete
  27. First I would like to thank you for this code. I have been searching for one that works and this is the only one I have found; however...
    it only works on one post per page. Am I missing something or do I need to change something in the CSS that will allow me to use this for multiple posts?

    Thanks again,
    Jack

    ReplyDelete
  28. Hi Jack,

    I use this code and everything is done well. For multiple post per page, you can look at this, you'll find some spoiler tags.

    For attention, you have to change the "YOURSPOILERID" with another text, and it should :
    - be unique for every spoiler content in your whole blog
    - contain alphanumeric only, no space allowed

    ReplyDelete
  29. Of course you need to change the "YOURSPOILERID" with something else... *bonks herself on head*

    Thanks so much, you kick ass! :)

    ReplyDelete
  30. mas kode javascrip untuk membuat judul postingan setiap kali di klik tampil vidio automatis play dan kalau klik postingan yang lain automatis hiden. atau juga buat spoiler auto play vidio lalu selesai nonton vidio auto hiden.

    blog saya www.sandaljepitvidio.blogspot.com

    kalau ada yang tau kode javascripnya saya tunggu balasan komentarnya

    ReplyDelete
  31. That's exactly what I was looking for.

    Thank you. It works perfectly. 

    ReplyDelete
  32. thanks much for this :)

    ReplyDelete
  33. I have a problem with "

    .spoilertop{
    background: #E4EAF2;
    border: 1px dotted #000;
    border-left: 4px solid #8394B2;
    color: #000;
    font-weight: bold;
    font-size: 10px;
    margin: 8px auto 0 auto;
    padding: 3px;
    text-decoration: underline;
    }
    .spoilermain{
    background: #FAFCFE;
    border: 1px dotted #000;
    border-left: 4px solid #8394B2;
    border-top: 0;
    color: #465584;
    padding: 4px;
    margin: 0 auto 8px auto;
    }"
    showing up on my blog pages. It's at the top and I don't know why it's appearing. Is there a way to fix this?

    ReplyDelete
  34. Good day! I simply wish to give an enormous thumbs up for the nice info you have
    got here on this post. I will be coming back
    to your weblog for more soon.

    My blog post: seoul national university of technology

    ReplyDelete
  35. Hiya! I just want to give a huge thumbs up for
    the great information you have right here on this post.
    I can be coming back to your weblog for more soon.


    Here is my website :: caster semenya video 800m final

    ReplyDelete
  36. Good day! I just would like to give a huge thumbs up for the great
    data you may have here on this post. I will likely be
    coming again to your weblog for extra soon.

    Look into my site :: semikolon album canada

    ReplyDelete