Cara Memasang Komentar Disqus Di Blogger Terbaru - Tutorial Lengkap

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

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

Nah, pada artikel kali ini saya akan menunjukkan tutorial lengkap (daripada blog lain) ihwal 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 eksklusif dari website Disqus. Walaupun lebih mudah, tapi kita tidak dapat mengatur letak komentar Disqus sesuai harapan kita alasannya yaitu komentar Disqus otomatis berada di Widget Blogger. Masalah ini dapat diatasi kalau Template yang kau gunakan sudah menyediakan Section widget khusus untuk Disqus.
  Namun, bagi kau yang tidak meemiliki template menyerupai itu dan kurang paham ihwal Edit Template, hal itu menjadi problem utama.
• Manual install Yakni pemasangan secara manual. Pemasangan Disqus secara manual di Blogger tidak akan sesulit yang kau bayangkan alasannya yaitu disini saya akan menunjukkan tutorialnya. Kelebihan dari pemasangan widget Disqus secara manual yaitu kita dapat mengatur letak Disqus sesuai keinginan. Tentunya dengan pinjaman tutorial ini,-- kita akan pasang widget Komentar Disqus sempurna dibawah Artikel blog.

Direct Install

Pergilah ke Disqus.com dan pilih Get Started. Lakukan registrasi menyerupai biasa. Kamu dapat memakai akun Facebook atau Google.

Pilih I want to Insall Disqus on My Site.

Isi data-data sesuai Blog yang akan kau 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 kalau tidak ada kawasan 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 sesudah kita klik sebuah tombol untuk menampilkannya. Selain itu, pemasangan ini akan menyembunyikan komentar bawaan Blogger.

Buka Dashboard Blogger > Tema > Edit HTML > Letakkan instruksi berikut ini sempurna dibawah instruksi  <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 instruksi berikut ini sempurna dibawah instruksi <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 instruksi CSS berikut ini sempurna diatas instruksi </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 instruksi javascript berikut ini sempurna diatas instruksi </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 teladan hasilnya, silahkan lihat widget komentar Disqus yang terpasang di blog Galihdesign dibawah artikel ini.

Berbagi :

Anda mungkin menyukai postingan ini :

• 
  Cara Menciptakan Table Of Content Di Blogger Keren Work 100%
• 
  Cara Menonaktifkan Atau Disable Anti Inspect Element Arlina
• 
  Belajar Html - Cara Kerja Tag Aside
• 
  Cara Mengaktifkan Inspect Element Yang Di Block Pemilik Web