Cara Membuat Show Hide Comments Blogger dengan Onclick Event

Cara Membuat Show Hide Comments Blogger dengan Onclick Event - Maksud dari judul yang akan saya bahas sekarang ini yaitu menambahkan fungsi show and hide ke dalam area kolom komentar blogger dengan menggunakan sebuah atribut tombol, dimana tombol ini berfungsi untuk menampilkan dan menyembunyikan form kotak kolom komentar serta seluruh isi komentar pengunjung blog.
Adapun tujuan menambahkan fungsi ini adalah untuk meringankan loading halaman postingan blog yang sudah terdapat banyak komentar pengunjung didalamnya. Coba anda bayangkan jika sebuah postingan di blog memiliki ratusan komentar bahkan sampai ribuan. Saya bisa pastikan loading halaman postingan tersebut akan menjadi lambat, karena harus me-loading gambar atau avatar profil dari para komentator terlebih dahulu.
Sistem kerja script ini cukup sederhana yaitu ketika postingan dibuka, area komentar akan tetap tertutup sebelum anda membuka area komentar dengan menekan tombol Show Comments dan anda pun bisa menutup kembali area komentar dengan menekan kembali tombol Hide Comments mirip Sistem kerja Spoiler.

Untuk lebih jelasnya bisa dilihat pada gambar berikut.

Show Comments

Hide Comments

Menambahkan Fungsi Show and Hide ke Area Komentar Blogger dengan Tombol
Untuk menambahkan fungsi buka dan tutup kolom komentar ini cukup sederhana sekali. Disini saya akan menggunakan beberapa kode CSS, kode HTML, dan kode JavaScript untuk ditambahkan ke dalam kode template blog. Berikut langkah-langkahnya.

1. Masuk ke akun blogger anda.
2. Pilih menu Template atau Tema.
3. Klik Backup / Pulihkan untuk download full template (Untuk berjaga-jaga jika terjadi kesalahan saat melakukan edit template).
4. Jika sudah, silahkan klik Edit HTML.
5. Letakkan kode CSS dibawah ini sebelum kode ]]></b:skin>.

/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

6. Letakkan kode di bawah ini sebelum kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

7. Temukan kode berikut.

<div class='comments' id='comments'>

Biasanya terdapat dua kode seperti diatas di dalam template. Ganti kedua kedua tersebut satu persatu dengan kode di bawah ini.

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

8. Terakhir klik Simpan Tema atau Save Template.

Kesimpulan :
Dengan membuat kolom komentar menggunakan fungsi show hide, maka ketika pengunjung mengakses salah satu artikel yang memiliki banyak komentar, loading atau proses akses halaman tersebut akan menjadi lebih ringan dan cepat, karena kolom komentar yang memiliki banyak komentar tidak akan terlihat sebelum tombol show komentar di klik oleh pemilik blog maupun pengunjung blog. Selain itu tampilan halaman postingan akan terlihat sederhana yakni pendek tidak memanjang ke bawah sehingga ketika pengunjung hendak ingin melihat gadget tertentu yang terletak pada bagian paling bawah ( footer ) blog akan merasa kesulitan dengan menscroll roll mouse beberapa kali untuk mencapai ke bagian paling bawah.
Demikian tutorial sederhana mengenai bagaimana menambahkan fungsi show and hide ke area komentar blogger dengan onclick event, Selamat mencoba dan semoga berhasil. " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG