4/02/2018

Cara Membuat Show Hide Komentar di Blog

        
Cara Membuat Show Hide Komentar di Blog - Bagaimana cara menyembunyikan dan menampilkan komentar di blog? sehingga setiap pengunjung yang membaca artikel melalui desktop dan mobile tidak terlalu panjang. Keberadaan kolom komentar sangat penting bagi sebuah blog, namun apabila jumlah komentar sudah banyak akan terlihat tidak baik jika dibuka melalui mobile.

Show hide komentar di blog diperlukan karena berfungsi untuk mempercantik dan merampingkan bagian area postingan, dan yang paling penting adalah dapat mempercepat loading blog.

Salah satu cara untuk membuat kolom komentar dapat disembunyikan yaitu dengan menambahkan javascript ke dalam template blog. Berikut ini beberapa langkah cara membuat show hide kolom komentar di blogger.

Cara Membuat Show Hide Komentar di Blog


#Langkah 1
Pastikan bahwa template blog kalian telah terpasang jQuery seperti berikut ini (berapapun versinya)
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

#Langkah 2
Letakkan kode dibawah ini tepat diatas kode </head>
<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>

#Langkah 3
Biar terlihat menarik letakkan kode CSS dibawah ini diatas kode ]]<>/b:skin> atau </style>
.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;}

#Langkah 4
Kemudian cari kode <div class='comments' id='comments'> lalu ganti dengan kode dibawah 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'/>

#Langkah 5 dan Terakhir
Simpan template dan lihat hasilnya.

** Catatan Penting
Sebelum melakukan langkah-langkah diatas lakukan backup template terlebih dahulu untuk mengatisipasi terjadinya hal-hal yang tidak diinginkan

Cara show hide diatas banyak dilakukan oleh para pemilik blog yang masih menginginkan setiap artikelnya mendapat komentar dari pengunjung, namun ada juga beberapa blog yang menyembunyikan kolom komentar sepenuhnya karena beberapa alasan.

Baca: Cara Membuat Recent Post Ringan Blogspot

Demikian cara membuat show hide komentar di blog, semoga berguna dan bermanfaat bagi kalian. Jika ada masalah jangan ragu untuk berkomentar.