Membuat Spoiler Sederhana Pada Postingan Blog

Bagi sebagian blogger, membuat spoiler pada postingan blog merupakan suatu kesenangan sendiri. Dengan adanya Spoiler akan menghemat halaman pada blog. Spoiler juga bisa diletakkan di sidebar untuk menyembunyikan widget.

Contoh Spoiler Pada Blog

Untuk membuat Spoiler tersebut, anda hanya perlu memasukkan kode dibawah ini.

Code:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Code</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan Tulisan, Gambar, Kode, HTML, JavaScript, dll Disini.

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

Ganti yang berwarna merah dengan yang and inginkan.
Untuk Memasukkan Gambar, Tambahkan kode dibawah ini

<img src="http://i1103.photobucket.com/albums/g478/blogkhairi/MasalahPadaAutoReadmore.jpg" />

Ganti kode Warna Merah dengan alamat gambar anda.

Contoh:

Selamat Mencoba dan Semoga Bermanfaat.
Jangan Lupa untuk meng-klik button bergambar +1 dibawah ini jika bermanfaat.

Artikel Terkait