Cara membuat tombol teks spoiler seperti di Kaskus 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
CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI ARTIKEL BLOG
Cara ini dapat dipakai untuk blog Blogger atau Wordpress. 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 pl`in untuk mengcopy.
<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>
<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!
4. Tinggal Anda Postingkan
0 komentar:
Posting Komentar