Agar komentar blogger bisa di hidden dan di munculkan kembali dengan onclick ( satu klik), tujua utamanya adalah membuat loading blog semakin ringan, namun tidak mengurangi nilai responsive blog tersebut..
Cara kerja fitur ini adalah komentar blog tidak terbuka otomatis melainkan harus menekan tombol show and hide dulu.
Membuat Show Hide Komentar Blogger
1. Silahkan masuk ke Dashboard Blogger Anda2. Pilih Tema > Edit HTML
3. Selanjutnya cari kode berikut ini :
<div class='comments' id='comments'>
hapus kode tersebut (biasanya terdapat 2 kode seperti itu ) dan ganti dengan kode di bawah ini:
4. Lalu tambahkan kode di bawah ini tepat di atas kode ini ]]></b:skin>
5. Tambahkan lagi kode di bawah ini sebelum </body>
6. Simpan Template.
Demikian untuk Cara Mudah Membuat Komentar Blogger Menjadi Show Hide.
<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. Lalu tambahkan kode di bawah ini tepat di atas kode ini ]]></b:skin>
/* Show and Hide Comments */ .hide-content{ font-family: Poppins,sans-serif ;font-weight:500;display:none;margin:0;padding:0;} a.showcontent,#comments a.hiddencontent{font-family: Poppins,sans-serif ;display:block;text-decoration:none;position:relative;color:#fff;font-weight:500;font-size:15px;padding:12.5px 0;background:#f24a4a;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#f24a4a;color:#fff;transition:all .3s} a.showcontent:hover{background:#fb5656;color:#fff;} #comments a.hiddencontent:hover{background:#f24a4a;color:#fff;}
5. Tambahkan lagi kode di bawah ini sebelum </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>
6. Simpan Template.
Demikian untuk Cara Mudah Membuat Komentar Blogger Menjadi Show Hide.
Post a Comment