Kotak komentar adalah salah satu elemen pendukung sebuah blog maupun  website, dengan adanya kotak komentar, para pengunjung bisa saling menyapa hingga bertanya mengenai artikel yang sedang ia baca (jika ia belum paham tentang artikel yang ia baca).

Tentunya jika ada pengunjung blog kamu yang berkomentar, pasti kamu akan senang, sebab itu tandanya blog kamu aktif dikunjungi oleh orang.

Namun, bagaimana jika ada puluhan atau bahkan ratusan komentar di blog kita?, ini pastinya akan membuat kesal pengunjung, karena scrool blog akan menjadi sangat panjang.

Tetapi, masalah ini bisa di atasi dengan membuat komentar show and hide, yaitu komentar akan membuka dan menutup jika kita klik sehingga scrool blog tidak akan panjang dan meringankan loading blog. Langsung saja simak tutorial dibawah!

#1 Membuat Komentar Blogger Show and Hide Setelah ada Komentar

Komentar blogger show and hide ini hanya akan tampil setelah ada pengunjung blog kamu yang berkomentar, artinya jika belum ada yang berkomentar, maka show and hide ini tidak akan tampil.

1. Buka dashboard blogger kamu.
2. Pilih menu Tema > Edit HTML, lalu cari kode <div class='comments' id='comments'> yang berdekatan dengan kode <b:includable id='threaded_comments' var='post'>.
3. Setelah kode tadi ketemu, kemudian ganti dengan kode di bawah.
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Tutup Komentar</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Buka Komentar</a>
<div class='clear'/>

4. Setelah selesai, cari kode </style>.
5. Lalu tempel kode di bawah, tepat di atas kode </style>.
/* Show and Hide Komentar by BangOpit.id */
.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. Masih tetap di Edit HTML, cari lagi kode </body>.
7. Lalu tempel kode di bawah, tepat di atas kode </body>.
<script type="text/javascript">
//<![CDATA[
// Show and Hide Komentar by BangOpit.id
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>

8. Simpan tema.


#2 Membuat Komentar Blogger Show and Hide Sebelum dan Setelah ada Komentar

Berbeda dari tutorial pertama, tutorial yang kedua ini show and hide-nya akan tampil meskipun belum ada komentar dan akan tampil juga setelah ada pengunjung blog kamu yang berkomentar. Saya sendiri menggunakan cara yang kedua ini pada blog saya

1. Buka dashboard blogger kamu.
2. Pilih menu Tema > Edit HTML, lalu cari kode <div class='comments' id='comments'>.
3. Setelah kode tadi ketemu, kemudian ganti dengan kode di bawah.
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Tutup Komentar</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Buka Komentar</a>
<div class='clear'/>
Terdapat dua kode <div class='comments' id='comments'> , maka ganti semua kode tersebut.

4. Setelah selesai, cari kode </style>.
5. Lalu tempel kode di bawah, tepat di atas kode </style>.
/* Show and Hide Komentar by BangOpit.id */
.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. Masih tetap di Edit HTML, cari lagi kode </body>.
7. Lalu tempel kode di bawah, tepat di atas kode </body>.
<script type="text/javascript">
//<![CDATA[
// Show and Hide Komentar by BangOpit.id
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>

8. Simpan tema.

DEMO

5 Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

  1. Saya pernah pake tombol show hide comment. Skrng sudah ngga...
    Meskipun sudah pake show hide comment, bukannya kita tetap scroll ke bawah untuk komen ya kan? Berapapun jumlah komennya.

    BalasHapus
    Balasan
    1. memang tetep ke bawah, namun banyak yang ga komen dan hanya scrool scrool doang

      Hapus
    2. Ya karna emang ga mau koment .

      Hapus
  2. Wahhh bagus nih, kalau untuk mengubah tampilan komentar blog dari disqus ke blogger itu gimana yaa, ada tutorial panduannya gak?

    BalasHapus
    Balasan
    1. secepatnya akan saya buatkan gan, ditunggu aja

      Hapus

Posting Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

Lebih baru Lebih lama