Saturday 7 July 2018

Cara Membuat Show Dan Hide Comments Di Blogger

Cara Membuat Show Dan Hide Comments Di Blogger

Komentar pada sebuah blog merupakan sebuah media interaksi sekaligus penghubung antara pemilik blog dengan pengunjung(visitor).

Dengan adanya komentar pada postingan tentunya akan memudahkan para pengunjung untuk menyampaikan aspirasinya mengenai konten yang anda buat.

Kadang kala blog besar yang baik bukan ditentukan dari jumlah pengunjungnya melainkan dari banyaknya komentar yang ada di blog tersebut.

Oleh sebab itu tak jarang kita temui blog-blog besar seperti Panduanim, Sugeng.id, Arlinadzgn dan sebagainya punya banyak sekali komentar didalamnya.

Hal ini tentunya merupakan sebuah hal positif yang sangat menguntungkan.

Tapi yang menjadi permasalahan disini ialah ketika sebuah blog memiliki konten, dengan didalamnya terdapat puluhan bahkan ratusan komentar yang memenuhi halaman blog.

Memang bagus, tapi hal ini juga menimbulkan beberapa hal yang kurang baik, diantaranya:
  • Isi konten blog tidak sebanding dengan banyaknya komentar, sehingga terlihat seperti blog spam
  • Kecepatan loading blog menurun, sebab terlalu banyak komentar yang dimuat
  • Komentar blog yang terlalu banyak memberi kesan bahwa blog tersebut tidak bersih (Bersih dalam artian, tidak tersusun secara baik)

Maka dari itu saya akan memberikan anda sebuah cara revolusioner yang akan membuat fitur komentar di blog anda akan jauh lebih ringkas, rapih, responsive, dan mudah dimuat.

Caranya adalah dengan membuat Show/Hide Comments!

Apakah Show/Hide Comments itu? ia merupakan sebuah fitur tambahan yang akan membuat komentar blog anda menjadi lebih ringkas dan simpel.

Jadi jika anda menerapkan cara yang akan saya bagikan ini, maka komentar anda akan berada pada posisi Hide atau tidak ditampilkan.

Disana anda hanya akan mendapati sebuah tulisan "Show Comment" yang berarti "Tampilkan Komentar". Jadi apabila anda menekan tombol Show ini, maka komentar di blog anda akan ditampilkan.

Untuk lebih jelasnya anda bisa langsung menerapkan caranya dengan mengikuti panduan dibawah ini:

1. Seperti biasa login terlebih dahulu ke blogger.com
2. Pilih Tema>>Edit HTML
3. Cari kode dibawah ini dengan menggunakan (CTRL+F)
<div class='comments' id='comments'>
Catatan:
Biasanya terdapat dua kode yang sama
4. Ganti kedua kode tersebut dengan kode berikut
<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'/>

5. Lalu tambahkan pula kode dibawah ini sebelum kode ]]></b:skin> atau </style>
/* 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. Terakhir masukan kode berikut tepat diatas </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. Terakhir Simpan Tema

Itu dia cara mudah menerapkan Show dan Hide Comments blogger. Cara ini pastinya akan membuat blog anda lebih cepat saat dimuat dan akan terlihat lebih rapih.

Oke saya rasa hanya itu yang bisa saya sampaikan, kurang lebihnya mohon maaf. Akhir kata saya ucapkan terimakasih dan sampai jumpa.

0 comments:

Post a Comment