Cara Terbaru Memasang Komentar Disqus Secara Permanen Di Blog

8 2 minutes read

Script komentar bawaan blogger itu memakan space baris kode yang cukup banyak. Hal ini juga yang membebani loading blog, mulai dari homepage lebih-lebih di halaman post atau post page.Karena itu kita akan memasang komentar disqus di blog.Hal ini bertujuan untuk membuat blog lebih cepat diakses dari sebelumnya. cara kali ini memasang komentar Disqus secara permanen, maka berarti anda saya anggap sudah tidak tertarik lagi untuk menggunakan komentar bawaan blogger. Entah itu komentar asli dari blogspot atau komentar blogspot yang sudah di custom sedemikian rupa. Dengan kalimat lain, anda tidak akan mau kembali lagi menggunakan komentar bawaan blogger/blogspot tersebut. Berikut caranya.

1. Pastikan Anda sudah mempunyai akun di Disqus kalau belum silahkan sign up dulu ke situs disqus, pastikan anda telah mengetahui SHORTNAME untuk komentar disqus yang akan kita buat widget komentar disqus

2. Login ke akun blogger anda pilih Tema » Edit HTML kemudian cari kode di bawah ini gunakan Ctrl + F untuk mempermudah pencarian
<b:includable id='comments' var='post'>

Selanjutnya ciutkan kode tersebut sehingga menjadi seperti kode di bawah

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

Hapus semua kode tersebut lalu ganti dengan kode di bawah ini

<b:includable id='comments' var='post'/><br /> <b:includable id='DisqusComment' var='post'></p> <div class='commentsDisqus' id='commentsDisqus'> <script type='text/javascript'> var disqus_url = disqus_blogger_current_url; var disqus_blogger_current_url = "<data:post.url.canonical.jsonEscaped/>"; if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = "<data:blog.url/>"; } var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>"; var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";} </script> </div> <p></b:includable>

Selanjutnya cari kode </article> lalu letakkan kode di bawah ini di atas kode </article>

<br /> <b:include cond='data:view.isPost' data='post' name='DisqusComment'/>

Pada langkah ketiga ini jika anda ingin menampilkan komentar disqus ini di halaman static, ubah kode tag conditional ini data:view.isPost menjadi data:view.isSingleItem

4. Selanjutnya letakkan kode di bawah ini di atas kode </body> atau </body>

<b:if cond='data:view.isPost'><br /> <script type='text/javascript'> var disqus_shortname = 'tamboenman-xyz'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script><br /> </b:if>

Ganti shortname tamboenman-xyz yang ada dalam kode tersebut dengan shortname komentar disqus anda.

5. Selanjutnya kita akan memulai penghapusan kode komentar bawaan blogger, ciutkan semua widget Blog1, sehingga tampilannya mungkin akan seperti gambar di bawah.

6. Kode kolom merah yang paling atas dan paling bawah adalah kode pendukung komentar bawaan blogger, sedangkan kode warna merah yang di tengah adalah kode share button komentar bawaan blogger.

Selanjutnya kita akan menghilangkan script yang terisi pada setiap includable

7. Kita akan menghilangkan script pada includable <b:includable id='comment-form' var='post'>

Scriptnya mungkin akan seperti ini

<b:includable id='comment-form' var='post'></p> <div class='comment-form'> <b:if cond='data:mobile'></p> <h4 id='comment-post-message'> <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postcommentmsg/></a></h4> <p> <data:blogcommentmessage/></p> <p><data:blogteamblogmessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/><br /> <b:else/></p> <h4 id='comment-post-message'> <data:postcommentmsg/></h4> <p> <data:blogcommentmessage/></p> <p><data:blogteamblogmessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/><br /> </b:if><br /> <data:post.friendConnectJs/><br /> <data:post.cmtfpIframe/><br /> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>'); </script> </div> <p></b:includable>

Hapus semua kode yang di bawah <b:includable id='comment-form' var='post'> sehingga akan menjadi <b:includable id='comment-form' var='post'/>

8. Selanjutnya lakukan langkah yang sama pada gambar yang ada pada langkah ke 5, sehingga hasilnya akan menjadi seperti gambar di bawah

Simpan Tema anda

Demikian tutorial singkat mengenai Cara Terbaru Memasang Komentar Disqus Secara Permanen Di Blog, semoga artikel ini bermanfaat bagi anda semua, jika masih kurang mengerti silahkan memberitahu di kolom komentar