Icha's Blog

Cara Membuat Tombol/Spoiler Buka Tutup Pada Blog

Kebanyakan dari para blogger jika aku amati dalam postingannya masing-masing, jarang sekali ada yang menggunakan cara ini. Yakni menyembunyikan gambar atau sebuah objek dengan menggunakan spoiler buka tutup. Kalaupun ada, hal itu dilakukan semata-mata demi atas nama Loading blog. Karena panjangnya sebuah artikel hingga membuat loading blog atau web menjadi berat saat dibuka, maka dengan solusi atau dengan cara inilah yang digunakannya. Yakni dengan cara membuat tombol/spoiler buka tutup. Namun demikian karena adanya permintaan, maka para mastah menciptakan sebuah script atau kode HTML untuk tombol buka tutup ini.

Dan aku yang termasuk kedalam golongan blogger yang Nubie dalam hal seperti ini mencoba untuk meneruskan cara memasang tombol/spoiler buka tutup ini. Dibawah ini adalah script atau kode untuk membuat tombol/spoiler buka tutup tersebut, sobat bisa langsung menyalinnya dan kemudian meletakkannya pada halaman mana saja yang hendak Anda pasangi tombol/spoiler buka tutup ini. 

Contoh spoiler buka tutup:

Kode untuk tombol buka tutup :

<div style="margin-bottom: 2px;">judul spoiler <div style="margin-top: 5px; text-align: center;"><input value="Buka" style="margin-top: 5px; 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"> Letakan Isi Spoiler disini,  Bisa gambar / tulisan  </div></div></div>

 




















 Pada tulisan berwarna merah yang terdapat dalam script diatas harus anda ganti dengan gambar atau objek yang hendak anda sembunyikan, sementara tulisan yang berwarna Ungu, biru dan juga coklat bisa anda ganti sesuai dengan kebutuhan. Misalnya pada kata ‘buka’ bisa anda ganti dengan kata open, dan pada kata ‘tutup’ bisa anda ganti dengan kata close atau sejenisnya. 

Demikianlah cara membuat tombol/spoiler buka tutup pada blog, semoga bisa sedikit membantu mohon maaf jika ada salah kata serta salah pada penulisannya. Bye-bye….

Share This :

ikhsan