Cara Membuat Show and Hide Pada Komentar Blog

Tutorial Cara Membuat Show and Hide Pada Komentar Blog - Pagi gan, update tutorial blogger nih. Admin mau share bagaimana sih cara membuat button show dan hide yang dapat menyembunyikan dan memunculkan kolom komentar. Cara ini berfungsi untuk membuat loading blog tidak terlalu berat karena diawal loading page kolom komentar tidak akan muncul kecuali setelah meng - klik button show nya. Penasaran ? okay gan cekidot.

Dalam memasang widget ini, disini scriptnya menggunakan javascript. Sebenarnya memasang show dan hide pada kolom komentar ini tidaklah sulit. Namun mungkin agan harus benar - benar teliti dalam mencari kode posisi kolom komentarnya. Tapi tenang nanti akan admin bantu gan. Okaylah dari pada kelamaan langsung saja cekidot.

Screenshot

Tutorial Pemasangan

Pertama agan masuk ke blogger, edit template dan cari kode <div class='comments' id='comments'> lalu agan ganti dengan script dibawah ini. ( kode seperti ini biasanya ada dua, ganti saja keduanya dengan script 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'/>

Kedua pasang script css, copy dan pasang script nya tepat 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;}

Ketiga masukkan script javascriptnya gan. Pasang tepat 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>

Selesai, tinggal agan save template. Jika agan masih ragu silahkan pratinjau saja dulu templatenya gan. Kalau agan masih bingung silahkan tanyakan dikolom komentar. Terimakasih