Skip to content Skip to sidebar Skip to footer

Cara Gampang Membuat Kolom Komentar pada Blog menjadi Show Hide

Cara Gampang Membuat Kolom Komentar pada Blog menjadi Show Hide

Cara gampang membuat kolom komentar pada blog menjadi show hide - dalam suatu blog, penting untuk mempunyai kolom komentar.

Tujuannya buat apa? Tujuannya adalah membuat kita lebih mudah untuk berkomunikasi dengan pengunjung blog kita.

Terlebih lagi, jika pengunjung blog kita ingin menanyakan sesuatu hal. Makanya penting adanya kolom komentar.

Tapi, kadang saya sering lihat. Banyak di beberapa blog banyak sekali komentarnya, hal ini membuat kolom komentar semakin panjang kebawah.


Apalagi yang komentarnya hingga ratusan bahkan ribuan. Itu akan membuat blog kalian menjadi kurang rapih.


Oleh karena hal itu, menurut saya, ga ada salahnya untuk menggunakan show hide pada kolom komentar.

Cara membuat kolom komentar menjadi show hide pada blog


1. Pertama kalian harus pergi ke dasbord blogger kalian.
2. Kedua kalian klik pada bagian tema.
3. Setelah itu, kalian masuk ke bagian edit html.
4. Kalian cari kode berikut ini, biasanya ada 2 buah kode seperti ini.

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

Jika sudah ketemu, kalian bisa ganti 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'/>

5. Jika sudah, kalian bisa masukan kode CSS dibawah ini pada bagian diatas kode ]]></b:skin>

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

6. Dan tambahkan lagi kode di bawah ini, dan taruh pada bagian 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. Setelah itu, kalian bisa klik simpan.

Sangat gampangkan?, Kalian bisa liat demonya di blog ini. Kalo udah, kalian juga bisa baca cara agar artikel kalian tidak bisa di copy-paste orang lain.

Demikian cara gampang membuat kolom komentar pada blog menjadi show hide. Jika kalian masih bingung, kalian bisa tanyakan di kolom komentar di bawah. Terima kasih.

3 comments for "Cara Gampang Membuat Kolom Komentar pada Blog menjadi Show Hide"

  1. Kalau bedanya sama display comment yang biasa apa ya gan?

    ReplyDelete
  2. Ini cuman jadi bisa di sembunyiin sama di munculin aja, jadi lebih hemat tempat

    ReplyDelete

Berlangganan via Email