Cara Masang Show and Hide Komentar Blogger dengan Onclick

Imamkunblog.com | Selamat datang di imamkunblog pada artikel ini saya akan membagikan lagi Tutorial Blogger yaitu memasang show and hide komentar blogger dengan oneclick. Pada artikel sebelumnya saya juga pernah membahas artikel yang serupa yaitu Cara Membuat Kotak Komentar Hide-Show.

Yang membedakan artikel dahulu dan artikel terbaru ini adalah Memasang Show and Hide Komentar blog pada artikel ini jauh lebih Responsive and Friendly di semua perangkat. Dengan memasang Hide and show juga akan mempercepat loading blog.

Show-Hide Komentar adalah sebuah fitur yang berfungsi untuk membuka dan menutup widget komentar blog anda. Di artikel ini menambahkan sebuah javascript onclick untuk mmebuat Show and Hide jauh lebih baik dan membuat blog anda akan jauh lebih ringan.

Untuk membuat Show and Hide pada widget komentar blog, disini saya menggunakan combinasi CSS,HTML dan Javascript. Untuk cara kerja script ini yaitu komentar akan tertutup dan jika ingin dibuka cukup klik show comment dan langsung terbuka.

Baiklah tidak perlu berlama-lama lagi, langsung saja kita masuk ke proses pemasangan show and hide pada komentar blog.

Cara Memasang Show & Hide Pada Komentar Blog dengan Onclick

1. Pertama login ke Blogger.com > Theme/tema > Edit HTML.
2. Cari kode <div class='comments' id='comments'> (Jika terdapat lebih dari satu kode maka ganti juga kode lainnya)

Gunakan CTRL+F Untuk mempermudah pencarian

3. JIka sudah ketemu, ganti kode tersebut 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'/>

4. Selanjutnya, silahkan cari lagi kode ]]></b:skin> atau kode </style>
5. Jika sudah ketemu salah satu kode diatas, copy dan pastekan kode dibawah ini diatas kode tersebut.


/* 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;}

6. Berikutnya cari lagi kode </body>
7. Jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode tersebut.


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

8. Simpan Template!

Itulah tutorial kali ini cara memasang tombol show and hide di blogger, untuk demonya anda bisa melihat di kolom komentar dibawah pada artikel ini. Kira-kira seperti itu hasilnya!

Baca Juga: Cara Membuat Lightbox Contact Form Blogger

Demikianlah artikel kali ini, semoga bermanfaat dan kalian bisa menyesuaikan atau mengedit kode-kode tersebut sesuai keinginan, seperti mengubah warna dan sebagainya!