Memasang Button Show/Hide (Spoiler)

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 :
<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.

Silakan disimak dan dicermati :

• Di sini kamu bisa memasukkan teks, kode, atau script
• Kamu juga bisa memasukkan image

• Klik button "Tutup" untuk menghilangkan area ini

Hasilnya :

Silakan disimak dan dicermati :

• Di sini kamu bisa memasukkan teks, kode, atau script
• Kamu juga bisa memasukkan image

• Klik button "Tutup" untuk menghilangkan area ini

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

----------------------------------------------------------------------------------

Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel

----------------------------------------------------------------------------------

Postingan Baru :

• Cara Membuat Arah Panah Mouse di Kelilingi Dengan ...
• Cara Membuat Link/Tulisan Pelangi
• Cara Membuat Objek Melayang
• Cara Membuat Disable Klik Kanan
• cara membuat gambar berputas format Flash
• Cara Membuat Halaman Kanan Atas Melipat
• Percantik Belog Dengan Software Blog
• Tempat Ganti Code Warna
• Cara Menu Tab View di Samping
• Cara Membuat Tulisan / text Berkedip
• Cara Membuat Menu Melayang
• Efek Marquee untuk Banner Berjalan
• Salam Pembuka Sesuai Dengan Settingan Waktu
• Mengganti Icon Blogger
• Cara membuat addres bar berjalan

TERIMAKASIH SUDAH BERKOMENTAR