Cara Memasang Komentar Disqus di Blogger Terbaru - Tutorial Lengkap

Cara Memasang Komentar Disqus di Blogger - Tutorial Lengkap - Ada banyak alasan mengapa kamu harus memasang widget komentar Disqus di Blogger. Salah satu kelebihan Disqus daripada komentar bawaan Blogger adalah moderasi yang lebih mudah serta tampilan komentar yang cantik.

Jika kamu merasa khawatir blog menjadi lemot setelah memasang Disqus, tenang saja. Karena, CSS dan Javascript Disqus sangatlah ringan.

Nah, pada artikel kali ini saya akan memberikan tutorial lengkap (daripada blog lain) tentang cara memasang widget komentar Disqus di Blogger.

Cara Memasang Komentar Disqus di Blogger - Tutorial Lengkap

Ada dua cara untuk pemasangan widget komentar di Blogger yakni :

• Direct install Yakni pemasangan langsung dari website Disqus. Walaupun lebih mudah, tapi kita tidak bisa mengatur letak komentar Disqus sesuai keinginan kita karena komentar Disqus otomatis berada di Widget Blogger. Masalah ini bisa diatasi jika Template yang kamu gunakan sudah menyediakan Section widget khusus untuk Disqus.
  Namun, bagi kamu yang tidak meemiliki template seperti itu dan kurang paham tentang Edit Template, hal itu menjadi masalah utama.
• Manual install Yakni pemasangan secara manual. Pemasangan Disqus secara manual di Blogger tidak akan sesulit yang kamu bayangkan karena disini saya akan memberikan tutorialnya. Kelebihan dari pemasangan widget Disqus secara manual adalah kita bisa mengatur letak Disqus sesuai keinginan. Tentunya dengan bantuan tutorial ini,-- kita akan pasang widget Komentar Disqus tepat dibawah Artikel blog.

Direct Install

Pergilah ke Disqus.com dan pilih Get Started. Lakukan pendaftaran seperti biasa. Kamu bisa menggunakan akun Facebook atau Google.

Pilih I want to Insall Disqus on My Site.

Isi data-data sesuai Blog yang akan kamu pasang widget Disqus.

Pilih Plan Basic dengan cara klik tombol Subscribe Now. Lalu pilih Platform Blogger.

Teken tombol Add Disqus on My Site seperti gambar dibawah ini.

Kamua akan diarahkan ke halaman Blogger untuk pemasangan Disqus. Klik tombol Menambah Widget.

Sekarang cek template milikmu. Pindahkan widget Disqus dengan cara masuk ke Blogger > Edit Tata Letak. Masalahnya, bagaimana jika tidak ada tempat khusus untuk meletakkan widget Disqus? Untuk itulah, ada Tutorial pemasangan secara manual berikut ini.

Manual Install

Untuk pemasangan Disqus secara manual, saya menambahkan fitur Onclick event agar Disqus akan tampil dibawah Artikel setelah kita klik sebuah tombol untuk menampilkannya. Selain itu, pemasangan ini akan menyembunyikan komentar bawaan Blogger.

Buka Dashboard Blogger > Tema > Edit HTML > Letakkan kode berikut ini tepat dibawah 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>

Masih di halaman Edit HTML, tambahkan kode berikut ini tepat dibawah 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'/>

Tambahkan kode CSS berikut ini tepat diatas kode </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>

Tambahkan kode javascript berikut ini tepat diatas kode </body>. Ganti username Disqus galihdesign dengan username disqus milik kamu.

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

SIMPAN!!

Untuk melihat contoh hasilnya, silahkan lihat widget komentar Disqus yang terpasang di blog Galihdesign dibawah artikel ini.