Wednesday 6 October 2010

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 tersebut.

Contoh






http://zonextster.blogspot.com



Ini Script yang diatas





<div><div style="margin: 5px;"><input value="Show" style="margin: 0px; padding:
0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show&#39;; }"
type="button" />

</div>

<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">

<div style="display: none;">


http://zonextster.blogspot.com

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


Atau yang ini





<div><div style="margin: 5px;">

<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight:
bold;"></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;">


http://zonextster.blogspot.com

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