Cara Membuat Spoiler Pada Postingan

Haloow,,sobat bloger..saya mau share tentang cara membuat spoiler nih.Pasti sobat bloger semua ingin blognya tampil lebih rapi dan terLoad lebih ringan kan ?.Nah,mungkin sobat bisa menggunakan salah satu cara ini,yaitu membuat spoiler pada postingan.



Apa sih sebenarnya kegunaan spoiler ? Spoiler sangat berguna untuk mengurangi beban loading sebuah postingan, fungsi dari Spoiler ini adalah untuk menghemat tempat, selain itu Spoiler ini juga membuat postingan sobat tampak lebih rapi.kalau sobat tertarik ingin membuat,berikut cara nya.

Cara Membuat Spoiler Pada Postingan :

1. Anggap saja sobat sedang membuat sebuah postingan, kemudian klik pada Tab Edit HTML.
2. Letakkan Kode dibawah ini :  
3. <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;">
   Isi Spoiler
   </div>
   </div>
   </div> 
4. Isi Spoiler : Isi dengan kode gambar, video, atau kode html lainnya.
   Sebagai contoh saya gunakan kode berikut :
   <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;">
   <a href="http://s1081.photobucket.com/albums/j344/kimzaqi/?action=view&amp;current=header-black.jpg" target="_blank"><img src="http://i1081.photobucket.com/albums/j344/kimzaqi/header-black.jpg" border="0" alt="Photobucket"></a>
   </div>
   </div>
   </div> 
   Hasilnya akan seperti ini :

Spoiler :

Cukup sekian,selamat mencoba.