Cara Membuat Tombol Show and Hide Komentar di Blogger

Jagoandzgn.com - Pada kesempatan kali ini admin akan memberikan sebuah tutorial bagaimana Cara Membuat Tombol Show / Hide Komentar di Blogger yaitu sebuah tombol yang dapat membuka dan menutup kolom komentar pada Blogger. Tombol buka tutup komentar ini memiliki banyak fungsinya, diantaranya adalah memperindah tampilan blog kamu, membuat blog kamu menjadi lebih profesional, meringakan loading blog walaupun hanya sedikit, dan Juga tampilan blog tidak berantakan karena kolom komentar.

Artikel ini terinspirasi dari sebuah blog yang mempunyai kolom kometar yang bisa membuka dengan sebuah tombol dan dengan menekan kembali untuk menutup kolom komentar tersebut. Untuk cara pembuatannya tidak terlalu sulit hanya memerlukan kode CSS dan Javascript pada template blog kalian.

Cara Membuat Tombol Show and Hide Komentar di Blogger

1. Silahkan kamu login di blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian kamu cari kode berikut ini dengan menggunakan CTRL + F <div class='comments' id='comments'> biasanya terdapat 2 markup, silahkan kamu ganti kedua 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. Kemudian kamu tambahkan kode CSS dibawah ini tepat di ATAS 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:#555;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#555;transition:all .3s}
a.showcontent:hover{background:#fff;color:#555;}
#comments a.hiddencontent:hover{background:#555;color:#fff;}

5. Langkah terakhir adalah dengan menambahkan kode JavaScript dibawah ini tepat di ATAS kode </body> pada template blog kalian.

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

6. Silahkan klik SIMPAN dan Selesai.

Nah, Begitulah Cara Membuat Tombol Show / Hide Komentar di Blogger apabila kamu memiliki kendala dalam mebuat tutorial diatas kamu bisa konsultasi kami lewat komentar dibawah artikel ini atau dengan Contact kami di halaman Contact.