Menampilkan Tombol Show and Hide Pada Artikel

Sabtu, 06 Oktober 2012
Hanya Ingin Berbagi - Terkadang dalam menulis artikel, ada elemen yang tidak ingin ditampilkan secara terbuka pada saat pengunjung blog membaca artikel yang kita publikasikan, elemen ini baru bisa terlihat jika pengunjung blog menekan button Show dan button Hide untuk menyembunyikannya kembali.


Trik ini dikenal dengan nama trik spoiler, tujuan menggunakan tombol Show and Hide ini umumnya ditujukan untuk memancing 'rasa penasaran' pengunjung blog terhadap elemen dalam artikel sehingga artikel yang disajikan kelihatan lebih menarik dan unik, disamping itu sangat bermanfaat pada penulisan artikel yang banyak memuat image atau kutipan-kutipan yang diambil dari berbagai sumber, agar artikel kelihatan tidak terlalu panjang, karena ada beberapa pengunjung blog yang tidak menyukai penyajian artikel yang terlalu panjang, hal ini akan berdampak pada tingginya Bounce Rate Blog lihat artikel Tips Menekan Persentase Bounce Rate Blog.

Kembali ke topik bahasan bagaimana cara menerapkan trik spoiler pada penulisan artikel, berikut script yang dapat anda gunakan :


<div><div style="margin-bottom: 2px;"><b><small>Untuk melihatnya silahkan klik ☛ </small></b><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>

<div style="border: 1px inset ; margin: 0px; padding: 0px;"><div style="display: none;">







ELEMEN SPOILER (Terserah anda)







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

Anda hanya perlu mengganti tulisan yang berwarna merah dengan elemen spoiler yang ingin di sembunyikan pada artikel dan tulisan yang berwarna biru silahkan sesuaikan saja dengan selera anda.

Cara penggunaannya, setelah script selesai di edit copy paste saja pada konten postingan anda, tetapi pada saat paste script ke dalam konten, halaman editor artikel harus dalam mode HTML.  Jika trik ini berhasil diterapkan ucapkan Alhamdulillah, contohnya seperti di bawah ini


Untuk melihatnya silahkan klik ☛





















Tidak ada komentar

Jangan Lupa Komentarnya

Lisensi Creative Commons