Dalam artikel kali ini saya akan membagikan Cara Membuat Komentar Disqus Onclick Event, fungsi dari fitur ini adalah menyembunyikan komentar disqus dan untuk mempercepat loading saat membuka halaman postingan di blog. Berikut langkah-langkahnya
Komentar Disqus Onclick Event
Buka Blogger > Pilih menu Tema/Template > Setelah itu klik tombol Edit HTML serta tambahkan kode berikut ini tepat di bawah kode HTML <b:includable id='comments' var='post'>...</b:includable>
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
</b:includable>
Kemudia kita tambahkan kode ini tepat di bawah kode <b:includable id='comments' var='post'>
<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div>
<div id='disqus_thread'/>
Jika telah kita gabungkan maka hasilnya akan menjadi seperti ini
<b:includable id='comments' var='post'>
<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div> <div id='disqus_thread'/>
Kemudian tambahkan kode CSS di bawah ini sebelum </head>
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Onclick Disqus Comment */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
.comments-blocks button{display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#01a3a4;border-radius:2px}
.comments-blocks button:hover{background:#029091}#disqusshow{position:relative;overflow:hidden;display:block;text-align:left;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#00b894;color:#fff;transition:all .3s}
#disqusshow:hover,#disqusshow:active{color:#fff}
</style>
</b:if>Sesuaikan CSS dengan keinginan kita sendiri
Setelah itu tambahkan kode di bawah ini tepat sebelum </body> atau <!-</body>-></body>
<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
var disqus_shortname = "arcomp-design";
!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_index.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script>
<script type='text/javascript'>
!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="arcompdesign";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>Ganti kode yang telah ditandai arcomp-design dengan username disqus sobat
Simpan dan lihat hasilnya di blog sobat
Pemberitahuan
Jika sobat masih mengaktifkan sistem komentar Google+, silahkan sobat nonaktifkan terlebih dahulu supaya kode di atas bisa bekerja dengan baik lalu atur setelan komentar blod dengan cara Klik setelan > Postingan, komentar, dan berbagi > Komentar > dan kemudian sesuaikan menjadi seperti gambar berikut
Demikian artikel tentang Cara Membuat Komentar Disqus Onclick Event, Semoga bermanfaat
