Memuat Komentar Disqus dengan Onclick Event

Memuat Komentar Disqus dengan Onclick Event - Kali ini yang akan disembunyikan adalah komentar disqus, berbeda dengan trik pada artikel Menambahkan Show and Hide CommentsBlogger dengan Onclick Event. Tombol yang akan muncul hanya akan memunculkan kolom komentar disqus saja, ketika tombol diklik tombol tersebut akan hilang secara otomatis. 

Namun fungsinya masih tetap sama yaitu untuk mempercepat loading saat memuat halaman (onload) postingan di blog. Berikut cara penerapannya 

Memuat Komentar Disqus dengan Onclick Event

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 Blogger > Template Editor > Cari kode di bawah ini 

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

2. Tambahkan kode di bawah ini tepat di bawah kode pada langkah 1 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>

Hasilnya akan seperti ini

HTML

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

HTML<script type='text/javascript'>
var disqus_shortname = &quot;arlinadesign&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>

Ganti kode yang ditandai dengan username disqus sobat. 4. Selanjutnya tambahkan kode di bawah ini sebelum ]]></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}

5. Cari kode di bawah ini

HTML<div class='comments' id='comments'>
&lt;/b:if&gt;

6. Tambahkan kode di bawah ini tepat di atas kode pada langkah ke 5

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

Hasilnya akan seperti ini

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

7. Untuk menampilkan disqus comment count di halaman index dan postingan, silakan tambahkan kode di bawah ini pada post meta atau post info sesuai template yang digunakan

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

8. Simpan template. 

Demikian tutorial tentang Cara Memuat Komentar Disqusdengan Onclick Event, semoga bermanfaat.

Share this post

ROBY NASURO GUNAWAN

-English My name is roby nasuro gunawan, I come from a small town, I am not notable in the real world but I am famous in cyberspace:) -INDONESIAN Nama saya roby nasuro gunawan , saya berasal dari kota kecil , saya tidak terkenal di dunia nyata tetapi saya terkenal di dunia maya :)

Berlangganan update artikel terbaru via email: