Cara Memasang Button Show / Hide ( Spoiler )

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 trik Memasang Button Show/Hide (Spoiler) 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 :<br /> <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 setelah value dengan kata atau kalimat yang kamu inginkan.
• K<div style="text-align: left; padding: 10px; border: 3px insert #333; font-size:small;"> merupakan gambaran area teks, image, dan/atau widget yang akan kamu masukan.
• Ganti kata dari ' silakan disimak dan di cermati ' sampai pada kode html paling bawah 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

Akhirnya selamat menyembunyikan teks, image, dan/atau widget dengan spoiler..Memasang Button Show/Hide (Spoiler)....Memasang Button Show/Hide (Spoiler)...