Memasang Komentar Disqus Dengan Onclick Event update!!!

Memasang Komentar Disqus Dengan Onclick Event

Pada kesempatan kali ini Zerone Blog akan memberikan Tutorial cara Memasang Komentar Disqus Dengan Onclick Event Ok langsung saja sobat

Catatan :

1. Jika di blog sudah terdapat widget disqus dan semua kode yang berkaitan dengan disqus, silakan hapus terlebih dahulu. Agar tutorial ini dapat diterapkan dengan baik.

2. Dalam tutorial ini ada kode yang menggunakan fontawesome. Pastikan di dalam template sudah terdapat link fontawesome.

1. Login ke blogger > Edit Template > Cari kode di bawah ini

HTML<b:includable id='comments' var='post'>

.......

.......

.......

</b:includable>

2. Tambahkan kode di bawah ini tepat di bawah kode yang ada di atas

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

3. Hasilnya akan seperti di bawah ini

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>

4. Selanjutnya tambahkan kode di bawah ini sebelum tag </body> 

JS<script type='text/javascript'>
var disqus_shortname = &quot;Zeroneblog&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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Ganti tulisan yang saya tandai dengan username disqus sobat

5. selanjutnya tambahkan kode di bawah ini sebelum tag ]]></b:skin> atau </style>

CSS/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}

6. Cari kode di bawah ini

HTML<div class='comments' id='comments'>

7. Tambahkan kode di bawah ini tepat di atas kode di atas

HTMLdiv id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

8. Untuk menampilkan  disqus comment di halaman index dan di postingan, silahkan sobat tambahkan kode di bawah ini pada post meta atau post info sesuai Template yang sobat gunakan

HTML<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

Demikian Tutorial cara Memasang Komentar Disqus Dengan Onclick Event semoga bermanfaat, Terimakasih sudah mengunjungi Zerone Blog

Baca Juga

•  How To Do SEO For Ecommerce
• Cara Terbaru meningkatkan Pagerank 
• Cara Terbaru Membuat Blog gratis dengan blogger