Search This Blog

Menyembunyikan Kolom Komentar Blogspot

  • Wednesday, June 13, 2018 at 7:26:00 PM
  • 0 Comments
  • Views
Agar blogku terlihat lebih rapih aku memutuskan untuk menyembunyikan kolom komentar bawaan Blogspot yang hanya akan muncul ketika di klik, trik ini menggunakan JavaScript. Trik keren ini aku temuin di blognya mbak Arlina Design. Yuk ikuti pengalaman saya menerapkannya di blog ini.

Cara Instal
Masuk ke blogger, kemudian ke bagian theme dan edit HTML lalu temukan kode berikut ini.
<div class='comments' id='comments'>
Biasanya terdapat dua kode seperti di atas. Ganti kedua kode tersebut dengan kode di bawah 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'/>
Untuk style CSS nya tambahkan kode di bawah ini sebelum ]]></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;} 
Tambahkan kode JavaScript di bawah ini sebelum tag </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>
Langkah terakhir simpan template.

Referensi
No comments
No comments

Post a Comment