Cara Membuat Show Hide Komentar Keren Di Blog

loading...
Haloo sobat media2give^^ Setelah kemarin nggak sempat update artikel,pada kesempatan ini Saya akan bagi-bagi info seputar dunia blog.Dan tema untuk ulasan kali ini adalah Cara Membuat Show Hide Komentar Keren Di Blog.Kotak komentar yang ada di sebuah blog adalah elemen penting yang perlu ada dan diperhatikan.Lewat kotak komentar itu pengunjung bebas menyampaikan pendapatnya,entah itu untuk merespon konten yang dia baca atau mengajukan kritik dan saran.

Bisa juga bertanya kepada admin jika mengalami kesulitan/kurang paham dengan artikelnya.Kadang sering pula di pergunakan sebagai tempat untuk promosi.Yang seperti itu jangan di tiru ya hehe.. Karena promosi lewat komentar blog jelas akan merugikan si pemilik blog tersebut karena biasanya yang suka promosi selalu mencantumkan link aktif dan jumlahnya banyak.Link aktif di tempat ini berpengaruh pada reputasi blog di search engine.

Link ini akan mengambil trafik dari blog yang di tempeli link dan isi komentarnya bisa di pastikan tidak relevan dengan pembahasan di dalam postingan itu.Makanya jangan heran kenapa sekarang banyak blog yang menonaktifkan Nama dan URL di bagian komentar,agar tidak di salah gunakan orang yang tidak bertanggung jawab dengan membully atau menghina admin.Tak lupa di atas komentar di beri keterangan juga yang isinya melarang bagi siapa saja yang mau berkomentar dengan link.

Untuk mereka yang senang blogwalking pun tidak di perkenankan menaruh link aktif.Admin sebenarnya sudah tau cara membedakan mana komentar yang benar-benar tanggapan dan mana yang hanya ingin mencari backlink melalui blogwalking.Jadi tidak perlu repot menunjukkan link karena Admin yang aktif dan tau cara berteman,tentu akan mengunjungi balik.Nah,bicara soal komentar blog,ada kaitannya juga dengan kualitas blog itu.Kok bisa? Pada dasarnya komentar default blog tersemat dan terlihat otomatis ketika halaman blog di buka.


Semakin banyak yang meninggalkan komentar,maka komentar akan memanjang ke bawah.Ini berdampak pada loading blog.Perlu di ketahui bahwa kotak komentar membutuhkan waktu yang agak lama untuk di load.Jika komentarnya ada banyak,waktu muat akan ikut lama juga sehingga memberatkan blog.Solusi mengatasinya adalah dengan membuat Show Hide Comment di blog.Show Hide ini adalah script yang memungkinkan kita untuk menyembunyikan kotak komentar,agar saat halaman di load,isi komentarnya tidak tampil.


Untuk melihat komentar,pengunjung dapat mengklik tombol Show.Begitu juga sebaliknya,bila mau menyembunyikan komentar dengan mengklik Hide.Cara ini efektif meningkatkan kecepatan loading blog dan menghemat ruang yang terpakai untuk komentar.Selain itu blog akan terlihat lebih menarik dan keren karena komentarnya seperti di simpan dan di sembunyikan dalam tempat khusus.Bagi kalian yang ingin mencoba memakai Show Hide ini,bisa langsung saja ikuti petunjuk pemasangannya berikut ini :

Show Hide Komentar Blog Versi 1
1. Login ke blog kalian
2. Masuk ke menu Template > Edit HTML
3. Cari kode ]]></b:skin>

4. Gunakan Ctrl+F untuk memudahkan pencarian
5. Letakkan kode berikut ini diatas kode ]]></b:skin> tadi
.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;}
6. Cari kode </head>
7. Letakkan kode dibawah ini diatas kode </head> tadi
<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>
8. Cari kode <div class=’comments’ id=’comments’>
9. Ganti 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'/>
10. Klik Simpan
Show Hide Komentar Blog Versi 2
1. Login ke blog kalian
2. Masuk ke menu Template > Edit HTML
3. Cari kode </head>

4. Gunakan Ctrl+F untuk memudahkan pencarian
5. Letakkan kode berikut ini diatas kode </head> tadi
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse();
});
//]]>
</script>
6. Cari kode <b:include data=’post’ name=’post’/>
7. Tambahkan kode ini dibawah kode <b:include data=’post’ name=’post’/> tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #container-commentfb {display:none;} .comments-icons {no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align:text-bottom;}</style>
<div class='comments-icons'>
Silahkan pilih Comment melalui: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#container-commentfb&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='blogger-icon' height='30' src='https://lh3.googleusercontent.com/-O6RbdKu5Rd4/VlRIevgCG5I/AAAAAAAAARM/ioc63DotDq0/h120/facebook%2Bicon.PNG' width='35'/></a> atau <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#container-commentfb&quot;).hide();'><img class='blogger-icon' height='30' src='https://lh3.googleusercontent.com/-oZVQ5BVp0cI/Vk6w_eKmbSI/AAAAAAAAAMs/csoPFnoCvCY/h120/blogger%2B%25281%2529.png' width='35'/></a>
</div>
<div id='fb-root'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div data-width='100%' id='container-commentfb' style='padding: 10px;padding-right: 10px;padding-left: 10px;'>
<div class='fb-comments' data-href='http://memberi-cara.blogspot.com/'>
<fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</div></div></b:if>
8. Klik Simpan 

25 Comments

  1. @Warim
    show hide comment ini hanya variasi aja,boleh di pakai boleh tidak.Silahkan di coba dulu krn bagus buat blog.Tapi klo mau tetap pakai yg default blog jg gpp

Leave a Reply

Your email address will not be published.


*