Cara Membuat Tombol Show / Hide (Spoiler)

Share

topgans.blogspot.com - Selamat pagi sobat blogger, pada postingan sebelumnya saya membahas tentang cara membuat Headline News di blogger, namun di pagi kali ini saya akan membahas tentang cara membuat tombol show dan hide. Ada yg udah tau bukan ? Nah silahkan di simak ..

Pada kesempatan kali ini saya akan mencoba berbagi tips blogger tentang cara membuat tombol show dan hide. Sudah pada tau bukan ? Bagi sobat yg belum tahu apa itu spoiler , saya jelasin lagi deh..hehe

Spoiler memiliki fungsi untuk menyembunyikan sebagian atau keseluruhan isi posting untuk menghemat ruang (Baik itu berupa text,gambar ,etc) , dan sangat berguna ketika mencoba untuk mengurangi ruang di entri/posting dan spoiler juga bisa membantu mempercepat loading blog. Karena itulah banyak yang menggunakan fasilitas ini di dalam postingan blognya. Yang pasti spoiler di sini bukan spoiler mobil..hhehe

Bagi sobat yang ingin memasang tombol show hide di blog, caranya gampang banget kok. Sobat blogger hanya perlu mengcopy paste kode HTML di bawah ini.

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></i><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;">


ISI SPOILER (Terserah anda)


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

Maka hasilnya seperti ini,

JUDUL SPOILER

ISI SPOILER (Terserah anda)

Ataupun bisa juga seperti ini,

Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode JUDUL SPOILER lalu anda ganti kata show dan hide sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misalnya : width:100px;

Gimana sob ? Cukup mudah bukan ? Hehe ,bila sobat masih belum mengerti dan belum bisa juga silahkan bertanya dengan meninggalkan komentar disini.
Semoga bermanfaat dan Selamat Mencoba :)

Related Posts by Categories