Cara Membuat Spoiler Pada Blog

Cara Membuat Spoiler Pada Blog - Sebelumnya, apa itu spoiler ? Menurut pengertian saya, spoiler adalah tombol yang dapat digunakan untuk mempersingkat postingan blog, karena spoiler akan menyembunyikan sebagian dari postingan dan bagian itu hanya dapat ditampilkan jika tombol spoiler diklik, dan dapat disembunyikan kembali jika tombol spoiler diklik lagi. Dengan begini, postingan kita tidak terlalu memakan tempat pada blog. Dalam spoiler ini, dapat digunakan untuk menyembunyikan teks, gambar, maupun video (untuk gambar dan video diubah ke bentuk script text terlebih dahulu).
Kali ini saya akan berbagi cara membuat spoiler pada postingan blog. Untuk lebih jelasnya tentang spoiler bisa dilihat pada contoh berikut :

Contoh Spoiler:


Contoh Spoiler 2:
Anda dapat meletakkan teks, gambar, maupun video disini

Berikut ini cara membuatnya :

1. Login ke akun Blogger anda

2. Pilih New Post atau Entri Baru seperti membuat postingan biasa

3. Pilihlah pada mode HTML saat membuat postingan

4. Gunakan script berikut ini untuk membuat spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Contoh Spoiler</b>: <input value="View" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau script anda disini
 <br>
</div>
</div>
</div>
Catatan :
  1. Kata Contoh Spoiler adalah judul dari spoiler itu (yang terletak di sebelah kiri tombol View / Hidden). Anda dapat menggantinya sesuai keinginan anda.
  2. Kata View dan Hidden adalah kata yang terdapat pada tombol. Anda dapat menggantinya sesuai keinginan

5. Klik Publish jika sudah selesai

Sekian artikel saya tentang cara membuat spoiler pada blog. Semoga artikel ini bermanfaat dan terima kasih telah berkunjung dan membaca di blog ini... ;)

31 komentar:

  1. Pertamax..yess akhirnya dapet juga kesempatan komen pertama. Nice post mas bro..! :D

    BalasHapus
  2. @ Share With Irfan
    Thanks kunjungannya mas bro.. ;)

    BalasHapus
  3. mas irfan permatak
    ane yang keduak hehehe

    salam kenal bro,,kebetulan lagi butuh spoiler

    BalasHapus
  4. @ mahir blogging
    Thx kunjungannya sob,, semoga bermanfaat ;)

    BalasHapus
  5. Yang keberapapun jadilah, ... nice info Sob.

    BalasHapus
  6. @Dwiyanto
    Terima kasih kunjungannya mas bro,,

    BalasHapus
  7. memanfaatkan sistim buka tutup untuk menghemat tempat :)

    BalasHapus
  8. @ Farixsantips
    Iya,, sip mas bro...

    BalasHapus
  9. good post. sayang ane skearang pake wp. ga utak atik bs lgi

    BalasHapus
  10. maksud dari spoiler tu apa mas/kak ?

    BalasHapus
  11. @ Blog Mantap Donk
    Spoiler itu adalah tombol yg ketika di klik bisa membuka dan menutup (menampilkan dan menyembunyikan isinya), contohnya seperti tombol yg ada tulisannya View diatas. Pada contoh diatas saya menggunakan gambar dan teks sebagai isi spoiler. Sedangkan anda dapat mengisinya dengan isi lain seperti video, kode HTML, dll. Fungsi spoiler adalah utk menghemat tempat di postingan blog,, karena dapat dibuka&ditutup.. ;)

    BalasHapus
  12. wah.... mantap sob..... makasih infonya....

    BalasHapus
  13. kereeen gann..

    web-merdeka.co.cc

    BalasHapus
  14. ketemunya disini..hehe kebetulan lgi mau buat posting dengan spoiler.. :)

    BalasHapus
  15. Thanks sob, lagi mau buat spoiler di blog ni..
    :D

    BalasHapus
  16. matorsuwon bro infonya mau ane coba nie.... :)

    BalasHapus
  17. Terakhir,,, selalu yang terakhir,,,hehehe
    maklum jarang blogging... postingan bagus mas bro....
    Thanks ah...

    BalasHapus
  18. ane dah coba gan tapi spoilernya kok gan mau show

    BalasHapus
  19. bagus gan.. follow blog ane yaa girarditenden.blogspot.com thank you ^^

    BalasHapus
  20. Ga' Ada Yank Lebih kerennz Lagi yach sobbb..

    Coz nich udah punya sayaaa... :D

    BalasHapus
  21. [spoiler=Judul spoiler ]http://3.bp.blogspot.com/-4d3iCni4j9c/TqwJO8QRWvI/AAAAAAAAAB0/OZ1XMHcg4WI/s1600/UZL%2BNEW2.jpg[/spoiler]
    hmmm test

    BalasHapus
  22. Terimakasih Gan infonya janagan lupa bekunjung di mari Karimunjwa Opentrip

    BalasHapus