Cara Menciptakan 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 kalau dibuka melalui mobile.

Show hide komentar di blog diharapkan alasannya ialah berfungsi untuk mempercantik dan merampingkan bab area postingan, dan yang paling penting ialah sanggup mempercepat loading blog.

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

Cara Membuat Show Hide Komentar di Blog

#Langkah 1
Pastikan bahwa template blog kalian telah terpasang jQuery menyerupai berikut ini (berapapun versinya)

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

#Langkah 2
Letakkan isyarat dibawah ini sempurna diatas isyarat </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 isyarat CSS dibawah ini diatas isyarat ]]<>/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 isyarat <div class='comments' id='comments'> kemudian ganti dengan isyarat 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 melaksanakan 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 menerima komentar dari pengunjung, namun ada juga beberapa blog yang menyembunyikan kolom komentar sepenuhnya alasannya ialah beberapa alasan.

Baca: Cara Membuat Recent Post Ringan Blogspot

Demikian cara menciptakan show hide komentar di blog, supaya berkhasiat dan bermanfaat bagi kalian. Jika ada problem jangan ragu untuk berkomentar.