Cara Membuat Shou-Hide (Spoiler)

Spoiler adalah salah satu teknik untuk menyembunyikan teks atau gambar yang cukup panjang. Dengan spoiler ini kita bisa membuka teks atau gambarnya dan menyembunyikannya kembali. Mungkin sobat blogger bosan dengan teknil Fungsi Scroll atau sistem bingkai.
Sekarang ayo kita coba Fungsi spoiler ini.
Contohnya adalah sebagai Berikut:

Contoh Spoiler

Berikut adalah contoh fungsi spoiler, yang dapat memperpendek halaman blog...

Oke, mungkin sobat blogger sudah ada gambaran kan?



Oke lansung saja kita kepada cara membuatnya.
Sebenarnya teknil spoiler ini bisa digunakan pada postingan, dan sidebar.
Jika Sobat blogger membuatnya dalam postingan, berarti anda harus merubahnya ke dalam Edit HTML bukan Compose.

Sekarang anda hanya butuh kode Script berikut.

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="font-weight: bold;"> Contoh Spoiler</span><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 = ' Tutup Aah...'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Buka Dong!!!'; }" style="font-size: 10px; margin: 5px; padding: 0px; width: 80px;" type="button" value=" Buka Dong!!!" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Berikut adalah contoh fungsi spoiler, yang dapat memperpendek halaman blog...

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

Tulisan yang berwarna merah itu silahkan anda ganti sesuai dengan keinginan anda.
Sesudah selesai, silahkan Save.


Semoga Bermanfaat