Cara Membuat Spoiler / Tombol Hide Show Pada Postingan Blog

Advertisemen

Kreativitas - Hallo Sobat Blogger dalam postingan kali saya akan membagi sedikit ilmu tentang bagaimana cara membuat spoiler / tombol hide show. Sebenarnya cara ini sudah banyak yang tau namun saya masih mempostingnya karna pasti masih ada teman² kita yang belum bisa membuatnya. Kita sering lihat di forum-forum seperti www.kaskus.us , mereka menggunakan spoiler untuk menyembunyikan gambar/teks/video dll untuk menghemat space. Spoiler ternyata bisa juga diterapkan di blog. Cara membuat spoiler di postingan blog sangat mudah. Ok langsung aja ke tkp :D

1. Buka account Blogger anda
2. Buat entri baru, dan pilih Edit HTML.


 3. Masukan kode berikut

<div>
<div style="margin-bottom: 2px;">
<input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="border: 1px dotted #ffffff; display: none;">
Isi Text Anda Disini </div>
</div>
</div>

Lalu klik Compose,


Jika langkah anda benar maka hasilnya akan seperti ini:

Isi Text Anda Disini

Sekian info dari saya dan semoga artikel ini bermanfaat bagi sobat..........!!!

Advertisemen

 Tutorial Blogger