Membuat Tombol Hide Show (Spoiler)

Cara membuat tombol teks spoiler dengan Hide and Show di mana artikel yang kita sembunyikan (HIDE) tidak akan tampak sampai pengunjung mengklik tombol SHOW. Trik ini dapat dipakai untuk Blogger BLogspot atau Wordpress

Kata-kata sebelum di HIDE and SHOW

Bagi seorang PNS (Pegawai Negeri Sipil) atau pejabat tinggi, hidup sederhana adalah keharusan untuk menghilangkan nafsu korupsi dan godaan tamak.

Bagi seorang jutawan, hidup sederhana membuat hidup lebih real, tanpa topeng dan lebih berbahagia karena terasa mudah untuk berbagi harta dengan yang lemah.

Bagi seorang ulama, ustadz, dan kyai yang hartawan, hidup sederhana adalah fardhu ‘ain karena mereka adalah simbol nilai ideal tertinggi dan penuntun umat yang mayoritas miskin. Miskin harta atau miskin jiwa. [Sumber link]

Setelah di HIDE AND SHOW (klik Show)

Bagi seorang PNS (Pegawai Negeri Sipil) atau pejabat tinggi, hidup sederhana adalah keharusan untuk menghilangkan nafsu korupsi dan godaan tamak. Bagi seorang jutawan, hidup sederhana membuat hidup lebih real, tanpa topeng dan lebih berbahagia karena terasa mudah untuk berbagi harta dengan yang lemah. Bagi seorang ulama, ustadz, dan kyai yang hartawan, hidup sederhana adalah fardhu ‘ain karena mereka adalah simbol nilai ideal tertinggi dan penuntun umat yang mayoritas miskin. Miskin harta atau miskin jiwa. [Sumber link]

Caranya mudah, ikuti panduan berikut:

1. Buka halaman untuk menulis artikel -> pastikan dalam mode Edit HTML (untuk Blogger) atau HTML (untuk Wordpress)
2. Copy dan paste kode di bawah ke halaman posting. Klik View plain untuk mengcopy. masukkan pada gadget blog anda , jika belum mengerti Klik DISINI

<div id="spoiler">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Tulis artikel di sini! 
</div>
</div>
</div>  

3. Taruh tulisan yang akan di HIDE AND SHOW di Tulis artikel di sini!

Semoga BERHASIL dan BERMANFAAT.