Spoiler di Postingan Blog 100% Sukses

Spoiler – Kali ini kita akan belajar tentang Spoiler di Postingan Blog, Sumber tulisan ini dari Bloggerbugis dan 100% Sukses dipasang. Mari kita simak bahasannya (sedikit sudah kami sesuaikan).

Spoiler adalah sebuah fitur dalam blog fungsi utamanya adalah menyembunyikan teks, kode, kalimat atau gambar. Fungsi nya mirip dengan text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. Saya yakin sobat sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

a. Membuat spoiler dengan isi teks

Klik Show Untuk Membuka Spoiler

Membuat spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

<div style="margin-bottom: 2px;"> Klik show untuk membuka bla bla bla<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks 
</div></div></div>


Keterangan;

- Klik show untuk membuka bla bla bla bisa sobat ganti termasuk Show
- Sedangkan kode berwarna biru adalah isi dari spoiler dengan teks. 

b. Memasang spoiler dengan isi image atau gambar

Spoiler : 
Kode spoiler untuk isi gambar ;

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <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="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="http://Kliyer2x.googlecode.com/files/photos.png" border="0" alt="Post spoiler">
</div>
</div>
</div>

Perhatikan cara memasang kode url gambar dengan teks warna merah. Ganti http://Kliyer2x.googlecode.com/files/photos.png dengan alamat gambar sobat sendiri yang sudah dihost misalnya milik saya ini di google code.
Bagaimana cara memasangnya di posting blog? Saat menulis artikel masuk ke menu HTML bukan compose (lihat kiri atas) kemudian masukkan kode-kode diatas.