Cara Membuat Spoiler Buka Tutup di Blog

Pada kesempatan yang lalu saya sudah share cara membuat Spoiler dengan HTML dan CSS, jika Spoiler yang dulu tidak berfungsi di Blog Anda. Silakan anda coba Cara Membuat Spoiler Buka Tutup ini. Spoiler Buka Tutup ini tidak diperlukan hack template, namun kode-nya cukup diaplikasikan secara langsung di area postingan. Jadi cukup simpel dan tidak perlu edit-editan HTML template.

Contoh mengaplikasikan Spoiler Buka Tutup di dalam postingan

Manusa Panak Manusa:

Judul : Manusa Panak Manusa
Vocal : Nanoe Biroe
Cipt. : Nanoe Biroe

 http://www.wayan-bali.com/2016/02/manusa-panak-manusananoe-biroe.html

Cara Memasang Spoiler Buka Tutup sbb:

1). Login ke Blogger
2). Pilih Entri Baru seperti membuat postingan biasa
3). Pilihlah pada mode Edit HTML saat membuat postingan
4). Gunakan kode script berikut ini untuk membuat spoiler:

<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;">
Letakkan teks atau kode script (gambar atau video) di sini
<br>
</div>
</div>
</div>

5. Anda dapat mengganti Judul Spoiler, tulisan Buka dan Tutup.
6. Klik Terbitkan Postingan jika sudah selesai. Terima kasih.

Search Post

Label :