Cara Membuat Spoiler Atau Tombol Sembunyi Pada Blogspot

Tips dan triks blog alias Tutorial blog hari ini adalah bagaimana cara membuat tombol spoiler atau tombol sembunyi pada postingan blog. Tombol spoiler atau tombol sembunyi pada blog mudah saja kita buat, hanya perlu menambahkan perintah tertentu agar menyembunyikan kontennya lalu menampilkannya jika tombol tersebut diklik. Berikut live demonya

LIVE DEMO

Oke, ikuti langkah - langkahnya berikut ini :

1. Login ke dashboar blog sobat --> Buat postingan, pilih pada mode Edit HTML

2. Copy code berikut, paste dipostingan sobat.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Klik Disini</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi Spoiler sobat disini, boleh gambar, code dll

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

Keterangan :

• Ganti tulisan warna merah, dengan tulisan yang sobat inginkan, bisa berisi penjelasan atau hanya sekedar "klik untuk melihat", tapi jangan dihapus nanti gak berfungsi spoilernya.
• Kemudian sobat ganti tulisan biru dengan isi spoiler sobat, misalnya gambar sobat.

 3. Publish / terbit entri . Lihat hasilnya..

Spoiler ini kadang-kadang sering dijumpai pada forum-forum kaskus dan forum-forum lainnya. Selamat mencoba sobat, have fun...

Posted in: HTML,Tutorial Blog