Bagi sebagian Anda tentunya familiar dengan kata-kata spoiler, apalagi pengguna forum-forum seperti Kaskus. Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bagi pengguna kaskus, tentunya berbeda kode antara kaskus dan web/blog. Langsung caranya aja gan... Pastikan ketika anda menulis postingan, dalam 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 hasilnya
Contoh spoiler:
Isi Spoiler

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.
Contoh kode gambar :

<div style="text-align: center;">
<img src="http://1.bp.blogspot.com/-rPtnyOalhRw/TvBFIZY3zDI/AAAAAAAABLY/PHbgs6iyO_8/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi
<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://1.bp.blogspot.com/-rPtnyOalhRw/TvBFIZY3zDI/AAAAAAAABLY/PHbgs6iyO_8/s1600/aspire3.jpg" />
</div>
</div></div></div>
Maka hasilnya seperti ini:
Contoh spoiler gambar:

Ditunggu komennya gan.... :)

8 komentar

sebenarnya sih mau aja pasang spoiler di blog, sayang ribet, jadi aku tunggu saja saat fitur itu tersedia resmi di blogger :D

Balas

Kayak threaded comment ya... tapi nunggunya lumayan lama :)

Balas

wah, trnyata ckup panjang juga ya

Balas

nice share gan,,,hampir saya stress nyari spoiler yg cocok...
sebagai trimakasih saya blognya udah saya follow..

Balas

Sama2 sob.. semoga bermanfaat..

Balas

belajar terus aku.. sudah dapat pengalaman banyak dari kang ismet.. terimakasih kang ismet,

Balas

baru kali ini nemu yang Work ^_^, makasih banyak kang ismet, bermanfaat :) (y)

bang-irham.blogspot.com

Balas

Poskan Komentar


×
Chat