E. MENAMBAH KODE SPOILER

E. MENAMBAH KODE SPOILER 

Agar tidak terlalu banyak memakan ruang dalam halaman blog, selain memberi fungsi scroll OK BROTHER juga menggunakan kode spoiler dimana artikel  atau gadget bisa diringkas dalam satu kotak menu yang bisa dilihat dan ditutup sesuai kebutuhan, adapun caranya adalah sebagai berikut: 

<div id="spoiler">
<div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="KOMPONEN BLOG OK BROTHER" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">

<div style="text-align: justify;">TEMPAT ARTIKEL ATAU GADGET YANG AKAN DI SPOILER
</div><div id="hide"></div></div></div>

KETERANGAN:

• Yang diblok warna kuning silahkan ganti dengan teks sesuai keperluan brother
• Yang diblok warna putih adalah kode untuk menambah background, jika tidak menginginkan background silahkan hapus kode yang ada diblok warna putih
• Yang diblok warna hijau adalah tempat dimana gadget atau artikel yang akan diberi efek spoiler
• Yang diblok warna merah adalah penutup dari kode spoiler

CONTOH SPOILER:

Perhatikan kode spoiler dibawah ini:
(Memberi kode spoiler pada widget alexa: kode widget alexa diblok warna merah, sedang yang diblok warna putih adalah kode untuk background:)

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT DO YOU LIKE MY BLOG LAGI'; }" name="button" type="button" value="DO YOU LIKE MY BLOG" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: AUTO;">

<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">

<p style="text-align: justify;">
<center><a href="http://www.alexa.com/siteinfo/http://ok-bro.blogspot.com/?p=rwidget#reviews" ><img src='http://www.alexa.com/images/widgets/purple/dark/v2-234x60.png' alt='review http://ok-bro.blogspot.com/ on alexa.com' /></a></center></p>
</div><div id="hide"></div></div></div>

HASIL DARI KODE SPOILER DIATAS ADALAH SEBAGAI BERIKUT :

PERLU DIINGAT SEBAGAI PENGETAHUAN DASAR BAHWA SETIAP KODE PEMBUKA WAJIB DITUTUP DENGAN KODE PENUTUP contoh <DIV>...ditutup dengan...</DIV> ATAU
<P>...ditutup dengan...</P> Dan seterusnya

ARTIKEL DALAM SATU LABEL