Kupas Spoiler Menu di BLOG - Postingan kali ini adalah mengenai spoiler. Semua pasti sudah tau apa itu menu spoiler.. Bagi yang belum tahu, saya akan menjelaskan sedikit mengenai spoiler. Spoiler adalah cara untuk
menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler
juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar
dan video tidak diload sebelum menekan tombol show. Dengan kata lain
spoiler membantu kita mengurangi waktu load konten blog dan memberikan
pilih kepada pembaca blog untuk membuka atau tidak isi spoiler
Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.
� Spoiler Forum misalnya KASKUS:
[spoiler=judul spoiler]isi spoiler[/spoiler]
Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.
� Spoiler untuk blog/web:
Menyembunyikan konten tertentu dari sebuah halaman blog/website
diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka
dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.
Berikut kode yang bisa digunakan dalam membuat spoiler di blog :
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </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>
dan berikut tampilan dari kode diatas.
Tentang bla..bla.bla..
Namun, ada cara yang lebih simpel,,yaitu dengan menggunakan Aplikasi BlogSpoiler. Aplikasi ini akan memudahkan anda dalam membuat spoiler yang perlu anda lakukan hanya judul spoiler anda dan mengisi isi daripada menu spoiler anda. Bagaimana caranya ?? Tenang ,, Saya akan memberitahukannya kepada anda.
Berikut ScreenShot Aplikasi BlogSpoiler
Dan Langsung saja download disini ...
http://www.4shared.com/file/4FV5IdSV/BlogSpoiler.html
Semoga Bermanfaat !! :D