Cara Membuat Show Hide Komentar Blogger

Kerapian dan Loading yang Ringan itulah menjadi motivasi dari para blogger untuk memasang show hide di beberapa komponen. Tak terkecuali terhadap kotak komentar blogger. Hal ini memang menjadi tuntutan mengingat dua aspek di atas yaitu kerapian dan ringannya loading menjadi dua hal yang harus diperhatikan oleh para blogger dalam mendesain website atau blognya.

Kotak komentar blogger atau blogspot tidak bisa dipungkiri bahwa desainnya akan banyak memakan tempat, khususnya area kosong di bawahnya yang terlihat kurang menarik. Demikian juga dalam meload kotak komentar menjadi beban tersendiri pada perenderan. Hal karena kotak komentar adalah berupa iframe.

Maka, salah satu cara mengatasi dua hal di atas pada kotak komentar adalah memberinya show hide. Show Hide Kotak Komentar akan menjadikan blog menjadi rapi dan ringan. Jadi walau banyak komentar yang ada di sebuah postingan, maka itu tidak akan nampak kecuali setelah menekan tombol 'show'.

Untuk memberikan gambaran lengkapnya, silahkan lihat demo Show Hide Komentar Blogger di bawah ini:

DEMO

Cara Membuat Show Hide Komentar Blogger

OK, langsung saja berikut adalah langkah-langkah membuat Show Hide Komentar Blogger. Lakukan dengan cermat dan teliti agar hasilnya menjadi maksimal.

1. Pastikan template blog sahabat telah memiliki jquery, misalnya seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

2. Silahkan masuk ke template sahabat dan letakkan CSS berikut ini setelah kode ]]></b:skin>

.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;}

3. Selanjutnya, letakkan javascript di bawah ini di atas 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>

4. Pada langkah keempat, silahkan cari kode seperti ini <div class='comments' id='comments'>. Manfaatkan CTRL+F untuk mencarinya agar mudah. Setelah itu ganti kode tersebut dengan kode berikut 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'/>

5. Simpan.

Tralala, sekarang blog atau website sahabat telah memiliki kotak komentar yang berbentuk show hide sehingga tampilannya menjadi keren dan pastinya ringan. Demikian tutorial tentang cara membuat show hide komentar blogger. Semoga bermanfaat.