Selamat Idul Fitri 1432 H

Mohon Maaf Lahir dan Batin. Selamat Idul Fitri, Kawan...

- YauNi.4ever

Pesan •"̮• ♈ǎυ иȋ •"̮•

Saturday, August 6, 2011

Membuat Button Show/Hide (Spoiler)

Sebelum memulai saya beritahu dulu ya, Spoiler adalah salah satu cara untuk menyembunyikan sebagian atau seluruh isi dari konten blog kita. Spoiler bermanfaat agar konten seperti video atau gambar yang ukuran besar tidak diload sebelum kita menekan tombol show. Bisa dibilang spoiler membantu mengurangi waktu load konten blog dan memberikan pilihan kepada pembaca mau dibuka atau tidak.

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:


Contoh Spoiler




isi spoiler...


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:



Selamat kamu telah berhasil :
  • Di sini kamu bisa memasukkan teks, kode, atau script
  • Kamu juga bisa memasukkan gambar
  • Tips-Tricks Computer & Internet|•̮• ♈ǎυ ♡̨̐ иȋ •̮•
  • Klik button "Tutup" untuk menghilangkan area ini



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:

Ngalor Ngidul said...

Thanks buat infonya gan..

YauNi said...

@Ngalor Ngidul
Sama-sama gan..

Admin 3 said...

makasih ya sob tipsnya, aku bookmarks ya, hehe..!!

YauNi said...

@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!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Template by Premium Blogger Themes | Modified and Enhanced by YauNi
Related Posts Plugin for WordPress, Blogger...