Cara Buat Spoiler di Blogspot

Kali ini saya ingin membahas tentang tutorial cara membuat spoiler di Blogspot. Sebelumnya apakah sobat tahu apa itu spoiler? spoiler berfungsi sebagai widget untuk menyembunyikan (show and hidden) suatu teks atau gambar agar tidak memakan tempat dan terlihat lebih simple. Spoiler ini bagus sekali digunakan bagi sobat yang ingin postingnya tidak terlihat terlalu panjang dan banyak berisi gambar-gambar, fungsi spoiler ini bisa sobat dapati dibeberapa forum-forum lokal atau luar, misal kaskus.us. Nah sekarang yang jadi pertanyaan apakah bisa memasang spoiler di blogspot yang notabenenya gratisan? jawabannya lagi-lagi sangat bisa, malah sobat bisa memodifikasi tampilan spoiler tersebut misalnya dengan warna dan sebagainya. Bagaimana tertarik ingin memasangnya?

Ikuti langkah berikut:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:

<div style="margin: 20px; margin-top:5px"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" type="button" style="margin: 0px; padding: 5px; width: auto; font-size: 11px;" 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 class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">

GAMBAR ATAU TEKS SOBAT LETAKKAN DISINI

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

Contoh ingin memasang sebuah GAMBAR ini:


Maka hasilnya seperti ini:

Spoiler untuk gambar:

contoh spoiler dengan teks:

Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?

Maka hasilnya seperti ini:

Spoiler untuk teks:

Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?

KETERANGAN

sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.



Full DEMO Here

Selamat ngeblog!