Cara Membuat Show and Hide Komentar di Blogger dengan Onclick Event

Cara Membuat Show and Hide Komentar di Blogger

Komentar pada sebuah blog yang dapat di buka dan tutup sudah sering sekali kita jumpai tak kala mengunjungi sebuah blog di pencarian google. dengan adanya show and hide komentar tersebut maka blog tersebut akan kelihatan sedikit rapi. kali ini saya akan membagikan bagaimana cara membuat show and hide komentar di blogger.

Melihat dan membaca komentar pada sebuah artikel blog atau situs menjadi hal yang wajib mungkin bagi kalian yang ingin mengetahui respon dan testimoni orang-orang terhadap apa yang dibahas pada suatu artikel tersebut.

Pengunjung yang baik dan toleran akan selalu bersedia untuk meninggalkan jejak komentar terhadap blog yang menurutnya memberikat manfaat. dan pemilik blog pun rata-rata akan senang dan menyukai apabila visitornya melakukan interaksi melalui kolom komentar ini.

Jika terdapat banyaknya jumlah komentar pada suatu blog, biasanya pemilik blog tersebut akan melakukan hide comment atau yang mana pengunjung dapat membuka kolom komentar tersebut secara manual.

Melakukan hide comment pada blog juga berdampak baik terhadap loading blog tersebut, jika terdapat banyaknya jumlah komentar dan kata tentu akan memperlambat loading halaman, terlebih lagi jika komentar juga dilengkapi dengan thumbnail-thumbnail pengguna.

Baiklah langsung saja simak lebih lanjut cara membuat komentar show dan hide di blog dengan onclick event.

Cara Membuat Show and Hide Komentar di Blogger

#1 Tombol Show and Hide Komentar Muncul Setelah ada Komentar

Cara Membuat komentar show dan hide yang pertama adalah dengan menampilkan tombol show dan hide hanya ketika ada pengunjung yang berkomentar pada blog kita. jadi, jika belum ada komentar maka tombol show dan hide nya tidak akan muncul.

1. Buka dashboard blogger

2. Pergi ke Tema > Edit HTML, lalu cari kode <div class=’comments’ id=’comments’> yang berdekatan dengan kode <b:includable id=’threaded_comments’ var=’post’>.

3. Kemudian ganti kode tersebut dengan kode berikut ini.

<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. Selanjutnya cari kode </style>, Tempelkan kode berikut tepat diatas 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;}

5. Terakhir, cari dan letakkan kode berikut diatas 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>

6.Simpan tema.

#2 Tombol Show and Hide Komentar Otomatis

Jika cara yang pertama tombol show and hide akan muncul ketika telah ada komentar, nah pada cara kedua ini Tombol show and hide komentarnya akan selalu ada baik sebelum maupun sesudah ada komentar pada Blog.

1.Buka dashboard blogger.

2. Pergi ke Tema > Edit HTML. cari kode <div class=’comments’ id=’comments’>.

3. Ganti kode tersebut dengan kode berikut ini.

<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'/>

Jika Terdapat dua kode <div class=’comments’ id=’comments’>, maka ganti semua kode tersebut.

4. Kemudian cari kode </style>, dan tempelkan kode berikut diatas 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;}

5. Terakhir cari dan Letakkan kode berikut tepat diatas 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>

6. Simpan tema, dan selesai.

Itulah langkah-langkah bagaimana cara membuat tombol show and hide komentar pada blog dengan on click event. sangat mudah bukan?. setelah menerpakan semua langkah diatas kamu akan langsung melihat tombol show comment muncul di blog mu. Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *