Cara Membuat dan Memasang Spoiler di Blog

Cara Membuat dan Memasang Spoiler di Blog

Teman teman kali ini saya ingin berbagi Cara Memasang Spoiler atau Buka Tutup pada postingan blog seperti ini biasanya ditemukan di forum-forum tujuannya untuk menghemat tempat atau untuk memperindah tampilan blog, spoiler sahabatnya scrool. Untuk membuat spoiler tidak lah sulit.

Contoh Spoiler di blog:


Contoh Spoiler Keren tentang Yoyo Apriyanto: 

Contoh Spoiler:

Cara Membuat Spoiler di Postingan Blog:


   1. Login ke akun blogger anda
   2. Pilih Entri Baru/New Post
   3. Lalu pilih mode Edit HTML
   4. Copy paste kode di bawah ini lalu taruh pada mode Edit HTML


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Tuliskan Teks Anda di Sini atau kode script gambar/video ! <br>
</div>
</div>

</div>


   5. Simpan







Cara Membuat Spoiler di Widget Blog:


1.    Login ke Akun Blogger anda
2.    Masuk ke menu tata letak
3.    Klik tambah widget lalu pilih HTML javascript
4.    Copy Paste kode di bawah ini

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Tuliskan Teks Anda di Sini atau kode script gambar/video ! <br>
</div>
</div>

</div> 


4.    Simpan

*) Ganti tulisan yang berwarna merah sesuai keinginan Anda


Semoga bermanfaat.