Cara Membuat Spoiler di Postingan Blog

Cara Membuat Spoiler di Postingan Blog - Spoiler adalah fitur dalam blog yang berguna untuk menyembunyikan gambar, teks, dsb. Fungsi Spoiler ini juga hampir sama dengan Text Area yaitu untuk menghemat halaman postingan agar tidak terlalu panjang hingga kebawah. Kalian tahu bentuk-bentuk spoiler?? Bentuk Spoiler yaitu jika kita klik "show", "hide" atau "close" kita bisa melihat gambar atau kembali kita sembunyikan seperti semula.


Spoiler juga sering dimasukkan pada sidebar dan juga footer blog. Langsung saja ini dia script untuk Membuat Spoiler di Postingan Blog :

A. Membuat Spoiler Dengan Isi Teks

Klik Show Untuk Membuka Spoiler

Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

Kodenya :

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler <div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks </div></div></div>

Keterangan :

• Ganti kode warna merah sesuka hati kalian sob

• Sedangkan kode berwarna biru adalah isi dari spoiler dengan teks.

B. Memasang Spoiler Dengan Gambar

Spoiler :

Kodenya :
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"> <b>Spoiler</b> : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"> <div style="display: none;"> <img src="http://julak-project.googlecode.com/files/photos.png" border="0" alt="Post spoiler"> </div> </div> </div>

Keterangan :
Perhatikan cara memasang kode url gambar dengan teks warna biru. Ganti
http://julak-project.googlecode.com/files/photos.png dengan alamat gambar sobat sendiri yang sudah dihost misalnya milik saya ini di google code.

Sekian posting kali ini dari saya, semoga bermanfaat bagi sobat blogger semua. Mohon maaf jika ada salah kata, langsung saja ditunggu comment-nya, jangan asal baca dan praktek.

Keyword untuk artikel ini : Cara Membuat Spoiler di Postingan Blog, Membuat Spoiler Di Blog, Cara Memaksimalkan Halaman Blog, Spoiler Blogger, Spoiler di Footer Blog