Cara Membuat Fungsi Onclick Load Pada Komentar Disqus

Cara Membuat Fungsi Onclick Load Pada Komentar Disqus - Onclick Load, dengan memasang fungsi ini di blog tenttunyanakan mempercepat loading blog sobat karena komentar Disqus akan tertunda dulu sebelum pengunjung Click Load Comment, apalagi jika komentar Disqus banyak sekali ada juga yang berupa gambar atau file lainnya itu akan memperlambat loading pada blog.oke simak cara dibawah ini.

Cara Memasang Fungsi Onclick Load

Pertama sobat masuk terlebih dahulu ke blogger.com > Klik pada Tema > Edit HTML > copy kode dibawah ini pastekan tepat dibawah 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 = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>

Setelah itu copy kode dibawah ini dan pastekan tepat dibawah 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'/>

Hasilnya seperti dibawah 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 sebelum kode </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment */
#comments{display:none}
.post-comment-link{visibility:hidden}
#disqus_thread{background:#fff;margin:10px 0 0 0;padding:0}
#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>

Atur kode CSS sesukamu Sobat

Kemudian pastekan Kode dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, Ganti triksimple dengan shortname disqus sobat sendiri

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;triksimple&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
<script type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="triksimple";!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>

Kemudian simpan Tema sobat dan lihat hasilnya.

Versi Warna Gradient

Bagi sobat yang ingin versi gradient ganti kode CSS diatas dengan kode CSS dibawah ini penempatannya masih sama.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment */
#comments{display:none}
.post-comment-link{visibility:hidden}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
#disqus_thread{background:#fff;margin:10px 0 0 0;padding:0}
#disqusshow{position:relative;overflow:hidden;display:block;text-align:center;font-weight:700;font-size:20px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}}
#disqusshow:hover,#disqusshow:active{color:#fff}
</style>
</b:if>

Demonya bisa lihat di blog ini.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Fungsi Onclick Load Pada Komentar Disqus Terima Kasih yang sudah berkunjung semoga bermanfaat