Cara Membuat Komentar Blogger Show and Hide dengan Onclick Event

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