Cara Masang Show and Hide Komentar Blogger dengan Onclick
February 02, 2020
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 pencarian3. JIka sudah ketemu, ganti kode tersebut dengan kode dibawah ini.
4. Selanjutnya, silahkan cari lagi kode ]]></b:skin> atau kode </style>
<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. 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;}
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>
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!
0 komentar