Cara Membuat Tombol Spoiler / Hide Show di Blog

Pada Postingan ini kita akan membahas tentang membuat tombol hide-show atau istilah kerennya sering disebut spoiler. Manfaat dari tombol spoiler ini untuk meringkas suatu objek apapun. Misalnya, Jika anda mempunyai artikel yang sangat panjang, Anda bisa meringkasnya dengan menggunakan tombol spoiler ini.

Berikut Contoh Tombol Show Hide :

Tombol spoiler juga berguna untuk gambar,  javaScript/ kode HTML serta apapun yang ingin anda pasangkan didalamnya.

Delta Net Kabunan

Cara Pembuatan :

• Login ke akun blogger Anda
• Klik menu Design lalu add gadget
• Pilih gadget HTML/JavaScript
• Masukkan kode di bawah ini di gadget HTML/JavaScript

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

<img height="60" src="http://i790.photobucket.com/albums/yy183/mahasena/Tukeran-Link.gif" target="blank" width="290" />

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

Keterangan : 

• Biru: Anda bisa menggantinya dengan kata yang anda inginkan. misanyal : Munculkan, atau show! 
• Hijau: Anda bisa menggantinya dengan kata yang anda inginkan. misanyal : hilangkan, atau Hide! 
• Merah: Ganti dengan tulisan atau kode atau objek lain yang ingin anda sisipkan didalam tombol spoiler

Semoga Artikel Ini Bermanfaat...!

Posted on 02.47 / 0 comments / Read More