Nggak mau ketinggalan artikel baru Blogger-Holic? Subscribe Sekarang
Hot Categories: Blogger News | Hack | SEO | Tips | Tutorial | more

Buat Spoiler di Blogger.. SPOILER ALERT!!

3.6.09 | 18 comments

Spoiler itu apa sih?? Mungkin yg sering berkelana dalam dunia internet tahu apa itu spoiler. Ok, spoiler adalah ras ayam yang mampu tumbuh cepat sehingga dapat menghasilkan daging dalam waktu relatif singkat kurang lebih 5-7 minggu... eits, apaan nih ayam-ayaman segala.. ngaco lo, bukan inilah artinya..

Oke, jadi balik lagi ke spoiler. Spoiler bisa disebut juga tulisan atau keterangan mengenai suatu cerita yang membeberkan jalan cerita tersebut. Karena sifatnya yg 'membocorkan' itu, maka keberadaanya kadang2 mesti disembunyikan. Jadi hanya terbaca oleh orang yg mau ngebaca bocoran tsb. Untuk menyembunyikan bocoran tsb, biasanya menggunakan kombinasi CSS dan JavaScript. Nah, teknik menyembunyikan bocoran itu akhirnya biasa disebut juga dgn spoiler.

Spoiler bisa juga digunakan untuk mengejutkan pengunjung dgn apa yg ada dalam spoiler tsb. Atau bisa juga untuk menghemat tempat artikel yg terlalu panjang. Well, fungsi spoiler bisa macem2 lah pastinya. Tinggal sekreatifnya kita aja.

Terus gimana cara ngebuatnya??

Caranya mudah banget koq..
Tinggal masukin kode HTML ke dalam postingan atau Elemen HTML.

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER </small></b></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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

ISI SPOILER

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

Pada bagian JUDUL SPOILER, bisa diganti2 sesuai judul spoiler. ISI SPOILER adalah isi spoiler yg sedang dibuat ini. Contohnya seperti ini.

JUDUL SPOILER :



ISI SPOILER



Selamat berspoiler ria.. dan awas SPOILER ALERT!!!!

18 comments:

  1. wewwwwwwwwwwwwwwwww... keren bngt neh trik, kayak dikaskus yah om... thanks bngt deh tutornya!

    ReplyDelete
  2. @ Pascal: wah, bro roni kaskuser juga yah.. keep posting gan :D

    ReplyDelete
  3. iya...mirip kayak yang ada di situs2 forum

    ReplyDelete
  4. tu masangnya di html editor apa dipostingan om?

    ReplyDelete
  5. @ alun: kayaknya bisa di 2 2 nya deh.. silakan dicoba dulu aja..

    btw, saya blom om2 lho.. wong SMA aja baru lulus :D

    ReplyDelete
  6. wkwkwk... belajar ngeblog ah..rasanya asik nih,,

    ReplyDelete
  7. jiahh, ktk kaskus nih bos., mantapp !

    ReplyDelete
  8. @ Ardhn: apaan tuh (Y)s up..??? btw, kmna aja lo ga kliatan ol??

    @ Anonymous: ngeblog tu asik lho.. hhehe

    @ ardianz: kaskuser dimana-mana ya.. wkwkwkwkwk

    ReplyDelete
  9. @ Ardhn: apaan tuh (Y)s up..??? btw, kmna aja lo ga kliatan ol??

    @ Anonymous: ngeblog tu asik lho.. hhehe

    @ ardianz: kaskuser dimana-mana ya.. wkwkwkwkwk

    ReplyDelete
  10. Keren bgt nih tips nya,,,, tengkyu mas

    ReplyDelete
  11. makasih yach yg dach post . .
    berguna bgt dech . .

    ReplyDelete
  12. tukeran link bro???
    mau gak,,
    aq uda pasang link mas di blog aq,,
    namanya blogger-holic

    ReplyDelete
  13. mantaf gan...sebagai rasa terima kasih aku masukin url blog bos di blog saya hehehe

    ReplyDelete
  14. kereeenn!!!!! bisa gitu ya.... ad trik2 lainnya ga?

    ReplyDelete
  15. daftar isinya gak jalan BOS...xixixixi

    ReplyDelete