Cara Membuat Show And Hide Komentar Diblog

Cara menambahkan show komentar dan hide(sembunyi) komentar - pada kesempatan ini saya akan membagikan tutorial yang berguna untuk blog anda pastinya. pasti anda pernah melihat tombol show komentar dan hide komentar diblog lain bukan?

Kegunaannya adalah untuk menghemat loading blog anda agar cepat dibuka, tampilannya sangat bagus diblog dan simple, silahkan ikuti tutorial ini, apabila anda mau memasangnya diblog anda.

Show And Hide Comment Di Blogger Dengan OnClick Event

1. Buka akun blogger > themplate > edit thempale cari kode <div class='comments' id='comments'>

Catatan : Biasanya ada 2 kode seperti <div class='comments' id='comments'>

2. Ganti (kedua) kode <div class='comments' id='comments'> dengan kode dibawah 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'/>

3. tambahkan kode dibawah ini diatas 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;}

4. Tambahkan kode dibawah ini diatas kode </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>

5. Simpan template anda, selesai.

Demikianlah cara menambahkan show and hide comment blogger dengan onclick event. jika ada kesulitan dalam pemasangannya, silahkan komentar di kolom komentar.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :