Trik Membuat Spoiler Pada Postingan Blog


Jika anda sering pergi ke Kakus…….ehhh salah maksud saya Kaskus Gan ^_^ atau mungkin anda adalah Kaskuser sejati, maka saya yakin anda sudah seringkali lihat tampilan Spoiler dan manfaatnya.

Intinya, Spoiler merupakan suatu tombol yang segaja dibuat untuk menyembunyikan dan menampilkan entah itu gambar, teks, link, dan sebagainya. Berikut ini beberapa manfaat dari Spoiler :
  • Membuat orang penasaran apa yang ada di dalam Spoiler tersebut
  • Jika pada postingan kita banyak sekali Gambarnya maka gambar-gambar tersebut bisa kita buatkan Spoiler agar Loading blog lebih cepat.
  • Menghemat tempat
  • Postingan kita bisa tampil Unik dan keren
  • Dan masih banyak lagi manfaat dari Spoiler.

Oh ya, jika masih kurang jelas dengan tampilan Spoiler, berikut inilah tampilannya. Silakan klik yaaahhhh ^_^





Gimana??? Kaget kan apaan isinya ahahahahahahaha

Baiklah, kita langsung saja ke cara pembuatan Spoiler pada postingan blog :

Silakan anda 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.

Oh ya, 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.

Jika ingin membuatnya di widget, pilih menu "HTML/Javascript".



Semoga Bermanfaat,

Tetap Semangat!!

7 komentar:

  1. udah aku coba dan work...
    thank ya gan...

    BalasHapus
  2. bagus mas bro ane kira apaan yang ada di spoiler itu echh ternyata foto profile yang poenya blog hheeeehhhhee maaf bcanda mas bro....
    thk's infonya

    BalasHapus
  3. script nya dimodif lewat mana bang?

    BalasHapus
  4. mantap gan ana coba beberapa....

    BalasHapus
  5. Cara memasang spoiler di badan posting saya kurang ngerti gan..
    tolong di bantu ya gan..

    BalasHapus
  6. kog ttp ja gan, g bs muncul gambarnya.......?? mohon penjelasanx lg...

    BalasHapus

Related Posts Plugin for WordPress, Blogger...