Menampilkan Tombol Show and Hide Pada Artikel

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Menulis sebuah artikel adalah salah satu pekerjaan pembloger, apa lagi jika dia lagi mut dalam menulis artikelnya, wah pasti panjang tuh. Secara otomatis jika setiap artikel / postinganya panjang dan lebar kalimatnya tentu akan mempengaruhi loading dalam membukanya, maksud saya jika menggunakan domain gratisan, ya kayak punya saya ini. he he he....

jadi untuk menanggulanginya, wah kayak bencana ajah kata-katanya. kan menanggulangi supaya tidak berat loadingnya. adalah dengan memendekkan postingan. maksudnya bukan tidak di tulis / disingkat tapi,,,,, di sembunyikan jadi tinggal tekan tombol tampil maka artikel selengkapnya akan tampil. begitu.!

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, gambar, text, dll)

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

Anda hanya perlu mengganti tulisan yang berwarna biru dengan elemen spoiler yang ingin di sembunyikan pada artikel dan tulisan yang berwarna merah 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 ☛

Bagikan lewat :

Anda sedang membaca artikel tentang Menampilkan Tombol Show and Hide Pada Artikel dan anda bisa menemukan artikel Menampilkan Tombol Show and Hide Pada Artikel ini dengan URL http://really-really-good.blogspot.com/2012/03/menampilkan-tombol-show-and-hide-pada.html. Anda boleh menyebarluaskannya atau meng-copy paste-nya jika artikel Menampilkan Tombol Show and Hide Pada Artikel ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan LINK Menampilkan Tombol Show and Hide Pada Artikel sebagai sumbernya.

<a href='http://really-really-good.blogspot.com/2012/03/menampilkan-tombol-show-and-hide-pada.html'>Menampilkan Tombol Show and Hide Pada Artikel</a>

Artikel lain yang mungkin ingin anda baca!

Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!