Cara Membuat Memuat Komentar Disqus Dengan Onclik Event

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Memuat Komentar Disqus Dengan Onclik Event ". Cara ini untuk membuat show hide pada komentar disqus agar lebih menarik di lihat
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Memuat Komentar Disqus Dengan Onclik Event

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode <b:includable id='comments' var='post'></b:includable> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Masukkan Kode Di Bawah Ini Di Bawah Kode <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. Kemudian Cari Kode </body>, Letakkan Kode Di Bawah Ini Di Atas Kode </body>

<script type='text/javascript'>
var disqus_shortname = &quot;cakyit&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="cakyit";!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 Kode Yang Di Cetak Tebal Dengan Id Disqus Anda
5. Selanjutnya Cari Kode ]]></b:skin> Atau </style>, Letakkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

/* Disqus Comments CY */
#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. Selanjutnya Cari Kode <div class='comments' id='comments'>, Letakkan Kode Di Bawah Ini Di Atas Kode <div class='comments' id='comments'>

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

7. Agar Disqus Comment Count Terlihat Di Homepage, Tambah Kode Di Bawah Ini Pada Post Meta / Post Info

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

8. Klik Simpan

Tag : Tutorial Blog