Cara Membuat Spoiler di Blog

spoiler,kaskus,spoiler buat blog
Artikel kali ini membahas tentang Cara Membuat Spoiler di Blog. Wah, kalo anak-anak forum pasti tau spoiler itu. Spoiler itu berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa juga untuk menyembunyikan teks, gambar, kode HTML, dll.

Untuk membuat spoiler pada postingan, ubahlah ke mode HTML, copy kode dibawah ini.
<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <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="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>
Ini contoh spoiler yang berhasil dibuat : 
Contoh spoiler teks:
Isi Spoiler

Kalo ingin menggunakan gambar, maka ganti teks Isi Spoiler dengan kode gambar.
Contoh kode gambar :
<div style="text-align: center;">
<img src="http://2.bp.blogspot.com/-DDyNyUqCUpo/UXKLlv_usDI/AAAAAAAAAVw/U8D-iCraHdc/s1600/images.jpg"
</div>
Maka kode spoiler diatas menjadi seperti ini :
<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <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="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="http://2.bp.blogspot.com/-DDyNyUqCUpo/UXKLlv_usDI/AAAAAAAAAVw/U8D-iCraHdc/s1600/images.jpg"
</div>

</div></div></div>
 Maka hasilnya seperti ini :
Contoh spoiler gambar:

Catatan :
Huruf yang berwarna biru tua anda ganti dengan judul spoiler yang anda inginkan dan yang berwarna merah bisa anda ganti dengan teks maupun kode gambar seperti cara diatas.

Sekian dulu nih artikel tentang Cara Membuat Spoiler di Blog, semoga bermanfaat bagi kita semua.

Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
Related Posts
Disqus Comments
© Copyright 2017 Tips Optimasi Blog | Cara SEO Web | TUTOR KEREN - All Rights Reserved - Template Created by goomsite - Proudly powered by Blogger