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.
APA ITU SPOILER HIDE & SHOW
Supaya mudah dimengerti, berikut contoh spoiler:
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)
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>
3. Taruh tulisan yang akan di HIDE AND SHOW di Tulis artikel di sini!
CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI KOMENTAR BLOG BLOGGER
Panduan ini khusus membuat spoiler di blog Blogger Blogspot bukan di blog Wordpress atau Joomla. Tujuannya agar artikel yang banyak komentarnya tampak lebih rapi seperti di blog ini.
1. Login/masuk ke Blogger.com -> Template -> Edit HTML -> Lanjutkan -> kasih tanda tik/centang "Expand Template Widget"
2. Cari kode berikut (gunakan Ctrl + F untuk mempermudah pencarian):
<div class='comments-content'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='threaded_comment_js'/> </b:if> <div id='comment-holder'> <data:post.commentHtml/> </div> </div>
3. Masukkan kode berikut di atas kode no.2
<!-- spoiler komentar part1 alkhoirot.net -->
<div><div style='margin-bottom: 2px;'><i><b><small/></b></i><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 = 'Lihat Komentar'; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end alkhoirot.net-->
4. Masukkan kode beerikut di bawah kode no.2
<!-- spoiler komentar part2 alkhoirot.net --> </div></div></div> <!-- spoiler komentar part2 end alkhoirot.net -->
5. Klik Simpan. Selesai
0 komentar:
Posting Komentar