Cara Membuat Komentar Disqus dengan Fungsi Onclick Load

Cara Membuat Komentar Disqus dengan Fungsi Onclick Load
Jika Anda sudah pernah mengunjungi blog Arlina Design, di sana terdapat kolom komentar disqus dengan fungsi onclick load. Saya yakin banyak yang sudah pernah melihat tapi beberapa mungkin tidak tahu namanya.

Pada dasarnya disqus dengan onclick load sama dengan komentar disqus pada umumnya yaitu memiliki fungsi sebagai kolom komentar. Tapi ada beberapa hal yang membuat disqus onclick load berbeda.

Saat kita membuka artikel pada disqus standar, maka kolom komentar disqus akan langsung terbuka. Ini sebenarnya kurang baik, karena dengan terbukanya kolom komentar secara otomatis akan membuat loading blog semakin berat dan tentu saja semakin lama.

Dengan adanya komentar disqus onclick load maka saat membuka artikel komentar disqus tidak langsung aktif, sehingga loading blog akan semakin cepat. Tapi jangan khawatir karena terdapat tombol komentar yang dapat Anda gunakan jika ingin membuat komentar.

Sudah tahukan kelebihan disqus dengan onclick load. Untuk panduannya bisa Anda lihat di bawah ini.

Login ke Blogger > masuk ke menu Tema > klik Edit HTML. Tambahkan kode di bawah ini tepat 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>

Kemudian tambahkan kode di bawah ini pada bagian bawah kode <b:includable id='comments' var='post'>.

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

Hasilnya akan seperti ini.

<b:includable id='comments' var='post'>
   <div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div>
   <div id='disqus_thread'/>

Copy kode CSS di bawah ini dan letakan sebelum </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>

Setelah itu tambahkan kode di bawah ini tepat di atas atau sebelum </body>. Ganti kode natshu dengan username disqus milik Anda.

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

Bagaimana? kerenkan tampilannya! Jika ingin mengubah warna ataupun tampilan silahkan Anda edit pada bagian kode CSS.
Tulis Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel