Cara Membuat Spoiler di Blog

Artikel terkait : 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.

Artikel Tips Optimasi Blog | Cara SEO Web | TUTOR KEREN Lainnya :

2 komentar:

Berkomentarlah yang baik dan sesuai dengan isi artikel. Komentar yang berisi link aktif dan SPAM akan dihapus. Terima kasih atas perhatian anda.

Copyright © 2015 Tips Optimasi Blog | Cara SEO Web | TUTOR KEREN Artikel Inspiratif