Membuat Spoiler di Blog

Salam goblogging!! kawan-kawan semua.

Sekarang saatnya kita melanjutkan tutorial blog tentang bagaimana membuat spoiler di blog. Bagi sebagian orang ini sudah biasa, namun bagi kalian yang belum tahu, apa salahnya kita meneruskan membaca tutorial ini. Spoiler atau bahasa sederhananya membuat tombol hide/show. Untuk contoh bisa kalian lihat di sebelah kanan di kolom "Kirim SMS gratis" dan "Facebookers". Itu merupakan contoh dari penerapan spoiler. Tujuannya adalah untuk menghemat ruang di blog. Ketika pembaca ingin menampilkannya, dengan mudah mereka melakukannya. Selanjutnya adalah bagaimana cara membuatnya?? Sangat mudah, mari kita lanjutkan sampai ke akhir.

Langkah-langkah yang harus dilakukan:

Copy kode berikut

---

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Di sini</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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...

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

---

Mudah Bukan..??

Selamat Mencoba!!

Salam hangat, goblogging

Artikel Terkait:

Recent Post