31 Jul 2013

Tips Cara Mudah Membuat SPOILER di Blog



 Salam hangat para blogger,

Maaf kalau saya langsung melompat dalam sharing tentang ilmu ngeblognya gegara melihat dalam postingan my best brother di blognya Kolong Langit seperti demikian :

Penampakan Omah Antik versi lawas
Nah, gara gara penasaran melihat tehnik postingan dalam artikel itu yang akhirnya saya ketahui bernama SPOILER.
Kira-kira sobat sudah mengenal SPOILER sebelumnya, yaaa pastilah dalam dunia perbloggeran merupakan tehnik untuk meringkas keseluruhan isi postingan artikel sobat bisa juga berupa gambar maupun video yang bejibun banyaknya dengan cara menaruh secara HIDE (tersembunyi).

Fungsi SPOILER itu sendiri untuk memangkas space halaman posting sobat supaya tidak terlalu memanjang ke bawah . Inget sama si belalai panjang BONA. Hehehehe.


Yuk ikuti tips cara mudah membuat SPOILER di blog sebagai berikut :
1. LOGIN ke Blogger
2. Pilih perintah Postingan Baru (NEW POST) seperti biasa akan menulis
3. Ubah tab COMPOSE  menjadi tab HTMLsaat membuat postingan
4.Pakailah kode Script seperti berikut ini:
Lihat Kode Scipt:
<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan teks atau kode script (gambar atau video) di sini <br> </div> </div> </div>
5. Ternyata "Judul Spoiler" dapat kita ubah sesuai keinginan kita, begitu juga dengan " Buka" dan " TutuP "
6.Terakhir klik "PUBLLISHED" atau terbitkan entri. Lihat contoh
Latihan Buat Spoiler Cantik:
follow @cputriarty on twitter
Demikian tips cara mudah membuat Spoiler di Blog.
Jika kode script ada yang tidak muncul silakan membaca artikel mengurai kode script  atau sobat masih mengalami kebingungan silakan untuk meninggalkan komen di bawah ini , yaa. Selamat mencoba :)

70 comments:

  1. Skripnya, skrip! Mana skrip? Hehe..

    ReplyDelete
    Replies
    1. hahaa belum seratus persen jadi ini mas, tadi coba2 malah kepublish. Okay nanti kalo aku sdh selesaikan DL penulisanku yaa...insyaalah. Hihiii

      Delete
  2. Wah apresiasi buat mbak Christ.., jarang kaum wanita yg mau peduli dengan urusan tutorial ngeblog.. Siip dah salut

    ReplyDelete
    Replies
    1. Alhamdullilah maturnuwunn lho,mas...seharusnya saya yang salut sama blognya njen isinya yang bernuansa religi, bikin ati adem ayem maak nyess kalo kesana. Slm sukses selalu :)

      Delete
    2. Makin banyak yang berbagi tips, tentu blogger Indonesia semakin pinter sam Insan. Ketimbang ilmu disimpen-simpen, emang bunga bank ? hehehe

      Mending ditularkan, biar jadi deposito amal bagi kita

      Delete
  3. keren sob.
    seru juga untuk memberikan kejutan

    ReplyDelete
    Replies
    1. thksss sudi mampir kemari...sama2 slm sukses :)

      Delete
  4. Replies
    1. Yuhuuuuui mbakyu caem, thksss sudah mampir ke lapakku ye ^_^

      Delete
  5. hmm,,, kapan2 pengen nyoba.... :)

    Thanks.. Tipsnya mbak...

    ReplyDelete
    Replies
    1. ayoo mbaa..gampang kok, aku dulu juga mikir2 begitu :)

      Delete
  6. Mbak, font-nya imut banget kayak aku.
    Kasihan aku kan pake kacamata, nggak lihat.
    Eh tapi, aku baru dengar ini. Kapan-kapan aku dimention ya Mbak :)

    ReplyDelete
  7. Salut dan jempol konsistensinya, ntar coba ah tutorialnya. Mention terus ya

    ReplyDelete
  8. Salut dan jempol konsistensinya, ntar coba ah tutorialnya. Mention terus ya

    ReplyDelete
  9. Sepertinya ini yang saya cari Mbak. Cuma kemarn gak tahu namanya apa *plak
    Makasi Mbak :)

    ReplyDelete
    Replies
    1. hehehe sekarang pastinya sudah taau deh :)

      Delete
  10. kayak yang di kaskus itu ya, mbak? :|
    eh iya, kalo tampilannya bisa di ganti juga gak mbak? biar gak 'kaku' kayak begitu tampilan spoilernya :o

    ReplyDelete
    Replies
    1. iyaa emang mirip di kaskus mbaa...
      mungkin bisa juga mb, tapi pake kode agak rumit ...hehehe
      ini yang so simple gituu :)

      Delete
  11. Replies
    1. maturnuwun yaa mas..pangestune mawon ^_^

      Delete
  12. Yang ini sederhana banget yaa mbak.. ^_^
    Soalnya yg saya tahu ada beberapa macam lagi code untuk Spoiler..

    Tapi bagus sih.. jadi orang gak bingung dan lebih mudah tuk nyoba..

    ReplyDelete
    Replies
    1. hehehe emang ambil yang simple2 saja deh, ntaar kalo yang super rumit ajarin aku yaa...okay ;) thks

      Delete
  13. Tips yang sangat bermanfaat. . .
    Kalau di Wordpress.com belum support ya, Mba?

    ReplyDelete
    Replies
    1. hihi belum pernah liat... kemungkinan besar belom yaa..tapi siapa tahu namanya kemajuan tehnologi. Aku punya WP tak ga aku optimalin :(

      Delete
    2. Idah itu asline jago WP mbak Christ... modus tuh anak haha

      Delete
    3. Heheheh berarti aku harus berguru sama mb Idah ya,mas...

      Delete
  14. Replies
    1. iyaa mas... emang pengin seperti yang ada di kaskus kok :)

      Delete
  15. Sip deh jadi juga akhirnya hehe

    ReplyDelete
  16. thanks mba, catat dulu, belum sempet nyoba..#rebutan lepi

    ReplyDelete
    Replies
    1. maakasiiii ya mbaa, sudi mampir lagi...hehehe gantian dong nanti nunggu anak2 Zzz

      Delete
  17. belum begitu ngerti sih....tapi...trims infonya....ntar diamati lagi blog ku, apa yg bisa diulik....

    ReplyDelete
    Replies
    1. sama2 mbaak Hani, coba ntar aku intipin deh blog mbaak.Mluncuuuuuuuuuuuur :)

      Delete
  18. kynya q belum perlu,org bru bljar,tpi thanx infonya bunda

    ReplyDelete
    Replies
    1. siapa tau nantinya bisa berguna yaa,mbaa... thks sudah mampir :)

      Delete
  19. makasih tipsnya mbak. btw aku jadi ketinggalan terus postinganmu m bak di bloglist kok gak update ya

    ReplyDelete
    Replies
    1. sama2 mama Calvin cantiikkk.... bloglistnya daftarnya gimana,ato maksutnya share di KEB gitu mbaa....hehehe

      Delete
  20. Nice share mba :D
    Langsung di kroyk dengan banyak komentar nih blognya hehehe :D

    ReplyDelete
    Replies
    1. tengkyu my bro :) you're the best too ^_^ have a nice holiday with the best Mommy :)

      Delete
  21. huwik,ini blog keren bangettt....salam kenal kembali mbk ^^

    ReplyDelete
    Replies
    1. helooo, mbaa Hana yang caem makasi sudi berkunjung ke lapakku. Slm sukses selalu :)

      Delete
  22. terimakasih tutorialnya, akan saya coba dulu....

    ReplyDelete
    Replies
    1. Iya mas.. silakan :) terimakasih sdh mampir

      Delete
  23. Makasih sharingnya mbak, ntar aku coba. Oya, kalo buat Wordpress bisa ndak ya

    ReplyDelete
    Replies
    1. belum support kalee mbak di WP thks mba Ika :)

      Delete
  24. Waaah..., termasuk ilmu baru buat saya neh...
    Makasih banyak ya, Mbak :)

    ReplyDelete
    Replies
    1. sama2 yaa mas..senangnya bisa sharing positif dengan sesama blogger lainnya

      Delete
  25. Alhamdulillah berhasil juga terpasang di blog saya.
    Terima kasih tipsnya dan salam kenal :)

    ReplyDelete
  26. wah, baru tau nih.. makasih ilmunya mbak. dirimu keren amat siih :)

    ReplyDelete
  27. Kalau mau memasukkan gambar di spoiler bagaimana caranya, mba?

    ReplyDelete
  28. mantaf mbak,izin langsung praktek
    hehe

    ReplyDelete
  29. saya udah coba ko link untuk video nya ga kebuka yaa

    ReplyDelete
    Replies
    1. mesti kode skriptnya harus diparse dulu ya mas :)

      Delete
  30. Mbak, kalo code script itu mau dijadiin spoiler gimana caranya?
    Kan si mbak bisa tuh code script itu dijadiin spoiler (di show & hide)

    ReplyDelete
    Replies
    1. kode skriptnya harus di parse dulu mas...nanti saya buatkan tutorialnya yaa.

      Delete
  31. Mbak, kalo mau bikin spoiler di dalam spoiler gimana caranya yah?

    ReplyDelete
  32. Wih, yg Mba Tanty bilang sederhana aja aq gak bisa niiih...langsung ngeluuu hihihii... Ntar ah kapan2 kudu coba tips2 dari Mba Tanty. Matur nuwun yaaa...

    ReplyDelete
    Replies
    1. ayo mbaa uNIEK semangat yaa :) dirimu itu top markotop lo.

      Delete
  33. sis, saya udah coba, tapi hasilnya spoilernya jadi gak bisa dibuka,, kenapa ya???

    ReplyDelete
    Replies
    1. mungkin ada kode yang kurang mas...dulu saya juga gagal nyoba pertama kali.Terus saya ulangin lagi dengan lebih teliti :) coba lagi ya :)

      Delete
  34. Makasih mas, silakan kunjungi juga situs adik

    http://www.prediksibola888.blogspot.com
    http://www.kis33.net

    Makasih

    ReplyDelete
  35. mangstab, berguna skali untuk bikin tutorial,,:)

    http://www.idcomputer.tk/p/blog-page_17.html

    ReplyDelete
  36. terima kasih banyak atas infonya
    http://giribig.com
    http://www.idcheat.com/
    http://www.duniagame.info/

    ReplyDelete
  37. mantep juga nih tipsnya.
    tak coba dulu mbak..diblog saya..hehe

    ReplyDelete
  38. kalau yang mendekin tulisan judul yang mana ya mak..aku bingung

    ReplyDelete
  39. Makasih infonya jadi pingin coba hehe bloger baru soalnya hehe

    ReplyDelete

Terimakasih sudah mampir dan berkomentar, insyaalah saya akan berkunjung balik. Sukses selalu :)