Membuat Show dan Hide Commentar Blog

Mungkin anda pernah melihat komentar blogger yang akan terbuka jika di klik terlebih dahulu seperti yang ada diblog ini, kali ini saya akan membahasnya. Apa gunya ? tentunya agar blog tidak berat karena harus membuka banyak komentar untuk blog yang sudah terkenal dan banyak pegunjungnya mungkin ini salah satu cara agar blog lebih cepat di buka oleh pengunjung dan tidak terganggu oleh banyaknya komentar di blog anda.

Penampilannya sebelum di klik dan sesudah di klik

Sebelum Di Klik

Setelah Di Klik

Langsung saja caranya seperti di bawah ini.

1. Cari Kode di bawah ini

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




*Biasanya terdapat 2 Kode seperti di atas silahkan ganti Kode di atas 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'/> 



2. Tambahkan CSS di bawah ini di </style> atau ]]></b:skin>

 /* Show and Hide Comments KecoaINDO */
.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:#0EA46E;border:2px solid;border-radius:3px;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:#0EA46E;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
 



3. Tambahkan JavaScript di bawah ini sebelum </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> 



4. Langkah terakhir tinggal save dan lihat hasilnya 

Silahkan Klik Demo di bawah ini lalu sorot bagian komentarnya.

Demo