Cara Mudah Memasang Comment Disqus di Blogspot - Onet4u Tech
Dark
News Update
Loading...

Cara Mudah Memasang Comment Disqus di Blogspot

Cara Mudah Memasang Comment Disqus di Blogspot
Also Read
Assalamualaikum.
Kli ini sya akan kongsikan cara memasang disqus comment di blogger,
ia sangat senang sekiranya anda ikut step step yang saya kongsikan ini.

Sebelum itu anda harus signup ataupun register di https://disqus.com
Cara Mudah Memasang Comment Disqus di Blogspot

Setelah selesai mendaftar click I WANT INSTALL DISQUS ON MY SITE.

Masukan website name dan category blog anda dan tekan create site & pilih basic plan.

Seterusnya

Click blogger

Seterusnya tekan butang Add onet4u to my Blogger site & ikut arahan seterusnya , untuk memasang widget di blog anda.

Login ke blogger anda dan tab Theme > Edit Html dan ikut step berikut


Selanjutnya Tambahkan code berikut di bawah  <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>

Tambahkan code di bawah ini selepas code  <b:includable id='comments' var='post'>...</b:includable>

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

Selanjutnya tambahkan css berikut sebelum code </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment Galihdesign */
#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 tambahkan code berikut sebelum code </body> dan gantikan tulisan hightlight dengan username Disqus anda

<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="arlinadesign";!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>

Save theme anda

Selesai, sila lihat hasilnya

senang bukan.

Thanks, 
O4U Admin.
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