Membuat Spoiler di Blog

Membuat Spoiler di Blog - Layaknya sebuah spoiler yang sering digunakan di dalam sebuah forum, spoiler blog juga sangat dibutuhkan dalam dunia blogging. Dengan membuat spoiler, pemilik blog akan lebih mudah untuk menghemat tempat/area di blog karena konten yang dibuat si pemilik blog yang bisa memakan tempat dapat disembunyikan (gambar, kode, dll). selain itu, membuat spoiler di blog juga ditujukan untuk mengurangi berat blog saat proses loading sebab konten yang ukurannya besar tidak akan ikut di load dan hanya akan tampil setelah tombol spoiler tersebut di klik.

Seperti apa sih spoiler itu???
coba liat tampilan spoiler di bawah ini:

Isi Spoiler . . .

Untuk membuat spoiler seperti di atas, maka kita cukup menggunakan kode dibawah ini:

<div>
<div style="margin-bottom: 5px;">
<div class="smallfont" style="margin: 2px;">
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 12px;" 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: 5px; padding: 1px;">
<div style="display: none;">

Isi Spoiler . . .

</div>
</div>
</div>
</div>

Contoh kode spoiler tersebut adalah contoh kode untuk spoiler yang berisikan teks biasa. Kalo sobat blogger mau memasukkan kode HTML, sobat blogger harus parse dulu kode HTML tersebut agar kodenya tidak langsung bekerja. Buat parse kode HTML bisa diliat di sini.
Untuk gambar, cukup ganti tulisan yang berwarna hijau dengan kode <img src="url gambar"> (kode HTML untuk memanggil gambar).

Secara umum kode untuk membuat spoiler di blog sama seperti kode di atas, tapi sobat blogger bisa sedikit modifikasi sehingga hasilnya nanti bisa sesuai keinginan.

---

Related Post on Agung X-Zeg Indraguna's World_

Blog World

• Menambahkan Efek OnMouseOver Transparan Pada Gambar
• Cara Pasang Energy Saving Mode dengan Gambar
• Menambahkan Efek OnMouseOver Pada Gambar
• Cara Membuat Teks Warna Pelangi (Rainbow Text)
• Cara Pasang Navigasi Breadcumb di Blogger
• Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser
• Menambahkan Emoticon Pada Shoutmix
• Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung
• Membuat Gambar Melayang di Blog
• Cara Pasang AddThis Share Button di Blog
• Membuat Text Area di Blog
• Cara Pasang Kode Warna HTML (HTML Color Code) di Blog
• Menambahkan Pesan di Bawah Posting Blog
• Link Otomatis Terbuka Tanpa di Klik
• Menampilakan Avatar Komentator
• Link Bergerak Saat Disorot Mouse
• Cara Membuat Buku Tamu Tersembunyi
• Daftar Website/Blog di Google, Yahoo dan Search Engine Lainnya
• Cara Membuat Form Untuk Banner Exchange
• Menambahkan Energi Saving Mode di Blog
• Menambahkan Scroll Button di Arsip Blog
• Auto-Hide Navigation Bar
• Membuat Efek Link Warna Pelangi
• Menghilangkan Navigation Bar di Blog