Cara Membuat Tombol Spoiler ( Show / Hide ) Pada Blog

Tombol / Button Spoiler yang berguna untuk menyembunyikan postingan atau widget maupun gambar yang terlalu panjang ke bawah, selain itu juga dapat berfungsi membuat Url menjadi none aktif jika Url suatu Situs diletakan di Area Tombol Spoiler, sehingga akan mempersingkat/menghemat area postingan pada Artikel Anda. dan kegunaan lainnya Tombol Spoiler dapat meringankan beban pada saat loading di suatu blog/website. yang cara kerjanya jika Tombol Show  di Klik maka secara automatis Blog akan menampilkan semua postingan, widget, maupun Gambar yang diletakan di dalam Area pada Tombol Spoiler, lalu jika Anda klik tombol Hide  maka tampilan postingan, widget maupun Gambar akan menutup kembali. ada beberapa langkah bagaimana Cara Membuat Tombol Spoiler (Show-Hide) pada postingan maupun pada widget sidebar. Kodenya adalah sebagai berikut :

<div><div style="margin-bottom: 2px;"><b><small>Klik Button / Tomboldibawah ini</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"> 

"Masukan Gambar, widget/script, postingan Sobat disini"

</div></div></div>

Hasilnya akan terlihat seperti contoh ini:

Klik Button / Tombol dibawah ini

"Masukan Gambar, widget/script, postingan Sobat disini"

TERIMA KASIH atas kunjungannya di Blog ini

 

Tampilan Real Sabian

Keterangan:

-Kemudian ganti kalimat yang berwarna   Merah  dan Biru  menurut keinginan Anda.
-Untuk kalimat yang berwarna   Hijau   Anda dapat menghapus kemudian menggantinya dengan Isi postingan, Gambar maupun kode script widget yang di inginkan. jangan lupa di Save/Simpan.. lalu terbitkan entri......Selesai...

Bagaimana..? mudahkan cara membuatnya... Selamat mencoba.... 


Sumber

Anda Sekarang Sedang Baca Artikel Tentang Cara Membuat Tombol Spoiler ( Show / Hide ) Pada Blog Anda Bisa Menemukan Artikel Cara Membuat Tombol Spoiler ( Show / Hide ) Pada BlogSaya Ini, dengan url http://real-sabian.blogspot.com/2012/09/cara-membuat-tombol-spoiler-show-hide.html, Kamu Juga Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Cara Membuat Tombol Spoiler ( Show / Hide ) Pada Blog ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Cara Membuat Tombol Spoiler ( Show / Hide ) Pada Blog Sumbernya. Thank's