Memasang Button Show/Hide (Spoiler)

Spoiler apaan OB? "Oh, asessoris yang biasa digunakan di belakang mobil, sehingga kaya mobil balap". Kalau OB membahas mobil, apa ada hubungannya dengan optimasi blog??? (wkakakakakak). Maksud spoiler di sini adalah menyembunyikan teks, image, dan/atau widget sehingga menghemat ruang suatu blog. Kemudian teks, image, dan/atau widget tersebut dapat ditampilkan kembali dengan menggunakan perintah (baca: bahasa pemprograman) tertentu. Ujung-ujungnya kita menggunakan "button" lagi, "button" memang ngga ada matinya (he..he.. no promotion). Khusus pengguna Wordpress, pluginnya dapat langsung diunduh di felixtriller.de. Sedangkan untuk blogger, mari kita ulas triknya tentang memasang spoiler.

Widget ini dapat kamu manfaatkan baik dalam postingan, sidebar, dan/atau elemen lainnya yang memiliki kesesuaian dengan widget spoiler.


Adapun kode HTML-nya adalah sebagai berikut :
<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Penggunaan Spoiler" 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 Lagi'; }" type="button"/></div><div class="spoiler"><div style="display: none;">
<div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;">
Silakan disimak dan dicermati :
<ul
><li>Di sini kamu bisa memasukkan teks, kode, atau script</li>
<li>Kamu juga bisa memasukkan image</li>
<center><img border="0" alt="U Comments I Follow" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/follow2.jpg"/></center>
<li>Klik button "Tutup" untuk menghilangkan area ini</li></ul>
</div></div></div></div>

Keterangan :
  • Ganti kode berwarna biru dengan kata atau kalimat yang kamu inginkan.
  • Kode berwarna hijau merupakan gambaran area teks, image, dan/atau widget yang akan kamu masukan.
  • Ganti kode yang berwarna merah dengan teks, image, dan/atau widget yang akan kamu inginkan.
  • Tidak menutup kemungkinan kamu dapat menambah dan mengurangi kode yang telah ada selama format dasar kode pembuatan spoiler tidak berubah, seperti dalam kode style="....." (yang berkelap-kelip) dapat ditambah atau dikurangi.

Hasilnya :
Silakan disimak dan dicermati :
  • Di sini kamu bisa memasukkan teks, kode, atau script
  • Kamu juga bisa memasukkan image
  • U Comments I Follow
  • Klik button "Tutup" untuk menghilangkan area ini

Akhirnya selamat menyembunyikan teks, image, dan/atau widget dengan spoiler...

18 komentar untuk “Memasang Button Show/Hide (Spoiler)”

  1. info ya berguna mas dan salam dari teman lama (admintopblog)

    www.topblogakbar.co.cc

    BalasHapus
  2. keduaxxx!!.. halah susah banget dapet pertamax, premium mulu. trik spoiler ini juga berguna sob, forum2 biasa pake kan? salam siang hari :D

    BalasHapus
  3. giliran aku (rebutan komputer nih sama c aa-allien), trik spoiler ini bisa buat nyimpen apa aja kan? makasih mas OB ;)

    BalasHapus
  4. Itu digunakan saat mo posting ya??? :d
    THank's ya infonya..
    Insya Allah ntar aq coba!!! ;;)

    BalasHapus
  5. to suami (Allien 99) dan istri (Kirana): klo di forum, kodenya cukup menggunakan [spoiler=isi dengan judul]isi dengan teks yang mas inginkan[/spoiler].
    Ngga bisa nyimpen semua, mba. Buktinya uang dan emas ngga bisa disimpen :D, tapi kalau satu atau lebih obyek tertentu (teks, gambar, script, widget, dan sejenisnya) baru bisa...

    BalasHapus
  6. こんにちは!お元気ですか?
    あなたは私たちのウェブサイトでBMXの写真の多くを得ることができます。してください自転車に乗って、我々ができる安全な地球覚えている。

    BalasHapus
  7. Lama-lama blog ini berubah jadi kayak Kaskus, hahaha mangap gan, cuma bercanda :cheers

    BalasHapus
  8. Kiat ini, memasang button show/hide (spoiler), memang praktis bisa menghemat ruang 8-} suatu blog. Trims tutorialnya. Salam sukses. :X

    BalasHapus
  9. Langsung ja nah ulun coba...
    kawa kah kada...
    oh iya om,ulun sudah pasang banner piyan...

    BalasHapus
  10. @BOOK ONLINE : Jiah, bahasa banjar kawal ni (kawal=teman). Kada papa nang panting (tidak apa-apa yang penting) komentator sama owner blog mengerti.

    BalasHapus
  11. thanks y bung..
    maklum nech msih newbi

    BalasHapus
  12. akhirnya nemu juga fuuuuh~
    thanks banget gan, script yg ane cari2 ne ! maklum masi cupu :D

    BalasHapus
  13. ini blog emang keren abis,.,..

    nuwun ..

    BalasHapus
  14. Ini di copas aja di postingan ya mas? wah aga ribet juga ya...nice infonya ^^

    BalasHapus
  15. thx bget ya mas.... artikelnya,,, keren bgt..!!

    BalasHapus
  16. Thanks Bos buat ilmunya........

    BalasHapus
  17. Kreeen ilmu nya, gan
    Bisa di coba nih

    BalasHapus