Membuat Tombol Postingan Blog Show Hide Seperti Di Kaskus

Bila kamu sering mengunjungi kaskus pasti sering melihat spoiler hide show yang didalamnya berisi tulisan atau gambar. Bagi yang ingin membuatnya ternyata cara membuat show hide seperti kaskus itu sangat mudah.

Fungsi show hide selain untuk meringkas tampilan juga memperindah tampilan posting. Di Spoiler show hide kita dapat mengisi dengan tulisan ataupun gambar atau bisa juga agar tampilan postingan blog tidak terlihat terlalu banyak.

Untuk cara memasang agar bisa tampil di posting, masukanlah script html dibawah ini dipostingan blog kamu lalu masukan tulisan atau gambar di isi dengan tulisan atau gambar. 

Nanti hasilnya akan terlihat seperti di bawah ini.

Spoiler for title :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> for <i>title</i> : <input onclick="if (this.parentNode.parentNode.getElementsByTaagName('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;">

isi dengan tulisan atau gambar

</div>

Selamat mencoba ^__^

Posted in: Tutorial Blog