Pastinya teman-teman sudah sering lihat Spoiler di forum-forum untuk menyembunyikan gambar, link dan sebagainya. Kode spoiler untuk forum berbeda dengan kode spoiler untuk blog.
Spoiler pada Forum:
[spoiler=judul spoiler]isi spoiler[/spoiler]
Spoiler untuk blog:
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Contoh Spoiler </span></i><input value="Show" style="margin: 0px; padding: 0px; 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...
</div></div></div></div>
Berikut ini contoh dari kode di atas:
Silahkan berkreasi semau nya..,
Ini ada contoh Spoiler 1(satu) lagi,.
Spoiler untuk Blog:
<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Spoiler" 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 class="spoiler"><div style="display: none;">
<div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;">
Selamat kamu telah berhasil :
<ul><li>Di sini kamu bisa memasukkan teks, kode, atau script</li>
<li>Kamu juga bisa memasukkan gambar</li>
<center><img alt="Tips-Tricks Computer & Internet|•̮• ♈ǎυ ♡̨̐ иȋ •̮•" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRD_XWfmEjSNXcblYfdAdyGAmwmG3LXozW-1VEznVH7Vzf9D9ekBV0G48kXGlUu4ai8xxieJW809j3IMBCekIfYS70YXTpeX6zsoD49bT72WPZtLT5ax028o_KktBZxvM_VGJLoEACT2w/" /></center>
<li>Klik button "Tutup" untuk menghilangkan area ini</li></ul>
</div></div></div></div>
Hasilnya:
Thanks to: Forantum & Dunia Guee
Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!
4 comments:
Thanks buat infonya gan..
@Ngalor Ngidul
Sama-sama gan..
makasih ya sob tipsnya, aku bookmarks ya, hehe..!!
@Qoqo AhnafiZz
kembali kasih sob., makaci uda dibookmarks. :)
Post a Comment
Silahkan tinggalkan komentar sebagai respon atau untuk bertanya.
Jangan SPAM ya, No SARA, No P0RNo!
Mohon tidak meninggalkan link di dalam comments.
Komentar berisi LINK & tidak sesuai judul akan segera dihapus!