Cara Membuat Onclick Load Pada Comment Disqus - Onet4u Tech
Dark
News Update
Loading...

Cara Membuat Onclick Load Pada Comment Disqus

Cara Membuat Onclick Load Pada Comment Disqus
Also Read
Assalamualaikum.
Kali ini Saya akan kongsikan Cara Membuat Onclick Load Pada Comment Disqus di blogger.
Onclick Load, dengan memasang fungsi ini di blog tenttunyan akan mempercepat loading blog anda.
Cara Membuat Onclick Load Pada Comment Disqus

Saya mendapat beberapa email yang bertanyakan tentang Cara Membuat Onclick Load Pada Comment Disqus, So hari ini saya akan kongsikan caranya.

Bagai mana?

Login ke blogger anda dan tab pada Theme > Html Editor

Setelah itu copy Code dibawah ini dan pastekan tepat dibawah Code <b:includable id='comments' var='post'>...</b:includable>

GAMBAR CONTOH :


<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>

GAMBAR CONTOH :


Setelah itu copy Code dibawah ini dan pastekan tepat dibawah Code <b:includable id='comments' var='post'>

<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div>
   <div id='disqus_thread'/>

Masukan css code berikut sebelum code </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>

Selanjutnya masukan js berikut sebelum code </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;okeybha&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="okeybha";!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>

Gantikan code okeybha dengan username disqs anda .

Setelah selesai save themplate anda dan sila lihat hasilnya.
Sekiranya anda mengikuti step step yang saya kongsikan, sudah pasti ia menjadi, sekiranya ada yang kurang faham sila tinggalkan comment ataupun hubungi saya.

Sekian saja posting saya , moga kita berjumpa lagi di posting yang akan datang jika diberi kesempatan, Wasalam

Thanks,
O4U Mode

DONATION Help give donations if the article feels useful. Donations will be used to extend the www.onet4u.com. domain. thanks.

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel