Cara Membuat Show and Hide Komentar Blogger
Cara Membuat Show and Hide Komentar Blogger - Seperti yang kita tau, komentar merupakan sebuah fitur yang berguna untuk memberi kesan ataupun kritik pada blog kita. Namun terkadang kolom komentar dapat menyebabkan blog kita menjadi lambat karena mungkin terlalu banyak komentar yang masuk ke blog kita.
Nah untuk meminimalisir lambat loading blog, kita bisa menambahkan fitur Show and Hide Komentar agar blog kita bisa berjalan dengan cepat dan agar terlihat lebih rapi. Tujuan menambahkan fitur ini sendiri adalah untuk meringankan beban loading (onload) blog di halaman postingan yang sudah terdapat banyak komentar disana.
Cara kerja fitur ini sendiri sangatlah simple yaitu konten komentar akan tertutup sebelum anda membukanya sendiri dengan menekan tombol Show and Hide. Nah untuk itu kalian bisa melihat tutorialnya di bawah ini.
Cara Membuat Show and Hide Komentar Blogger
1. Buka Blogger --> Tema --> Edit HTML dan cari script dibawah ini:
<div class='comments' id='comments'>
NB: Biasanya terdapat dua markup script seperti diatas!Lalu langkah selanjutnya, ganti kedua script diatas dengan script 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'/>
<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'/>
2. Tambahkan script dibawah 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;}
.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;}
3. Tambahkan script dibawah 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>
//<![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>
4. Klik Simpan Template
Nah kurang lebih begitulah Cara Membuat Show and Hide Komentar Blogger. Jika ada error ataupun merasa kesulitan jangan lupa tinggalkan komentar agar saya dapat membantu anda semampu saya.
Admin Ganteng
Seorang penulis spesialis dibidang perkembangan bisnis di indonesia.