Cara Memasang Komentar Disqus Permanen di Blogspot

Tutorial blog kali ini tentang cara memasang komentar Disqus di blog platform Blogger.com yaitu blogspot. Karena kita akan memasang komentar Disqus ini secara permanen, maka segala fitur atau semua script komentar bawaan blogger akan dihapus atau dihilangkan.

Hal ini bertujuan untuk membuat blog lebih cepat diakses dari sebelumnya. Kita ketahui bahwa script komentar bawaan blogger itu memakan space baris kode yang cukup banyak. Hal ini pun yang membebani loading blog, mulai dari homepage lebih-lebih di halaman post atau post page.

Baca jug: Inilah Kelebihan Komentar Disqus yang Perlu Anda Ketahui

Karena 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.

Cara menggunakan komentar Disqus di Blogspot secara permanen

Sebelum melakukan langkah-langkah berikut ini, pastikan anda sudah mempunyai akun di Disqus. Jika belum, silahkan simak terlebih dahulu tutorial tentang Cara Terbaru Memasang Komentar Disqus di Blogger Valid HTML5, lalu ikuti langkah-langkah berikut ini.

#Langkah 2
Pada tahap ini, saya anggap anda sudah mendapatkan username komentar Disqus untuk blog anda. Masukkan username komentar Disqus tersebut pada kode yang ditandap di bawah ini.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<script type='text/javascript'>
var disqus_shortname = "USERNAME DISQUS";
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
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/>";
(function() {
var bloggerjs = document.createElement("script");
bloggerjs.type = "text/javascript";
bloggerjs.async = true;
bloggerjs.src = "//"+disqus_shortname+".disqus.com/blogger_item.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(bloggerjs);
})();
(function() {
var bloggerjs = document.createElement("script");
bloggerjs.type = "text/javascript";
bloggerjs.async = true;
bloggerjs.src = "//"+disqus_shortname+".disqus.com/blogger_index.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(bloggerjs);
})();
var disqus_shortname = 'USERNAME DISQUS';

(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</div>
</b:includable>

#Langkah 2
Temukan kode berikut ini.

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

Kemudian ciutkan kode tersebut, sehingga menjadi seperti ini.

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

Hapus seluruh kode yang diciutkan tersebut, lalu ganti dengan seluruh kode pada Langkah 1 (username Disqusnya sudah diganti).

#langkah 3
Selanjutnya kita akan menghapus seluruh fitur/script komentar bawaan blogger dan juga segala fitur yang tidak digunakan dalam template yang sedang digunakan di blog anda.

Untuk itu, anda perlu menciutkan seluruh widget pada Blog1. Sehingga hasilnya terlihat kurang lebih akan seperti pada gambar ini.

Kode pada kolom merah di atas ialah fitur pendukung komentar bawaan blogger dan kode yang diberi tanda biru ialah kode share button bawaan blogger yang sering tidak dimanfaatkan oleh kebanyakan blogger.

Kita akan menghilangkan script yang terisi pada tiap-tiap includable yang ditandai pada gambar di atas.

#langkah 4
Cara menghilangkannya ialah, misalnya kita akan menghapus script pada includable <b:includable id='comment-form' var='post'>

Yang kurang lebih kode/script di dalamnya seperti ini.

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<b:if cond='data:mobile'>
<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>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<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%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>

Hapus kode yang diblock (kuning) di atas. Lalu pada kode yang diberi garis bawah, berikan kode / sebagai penutupnya. Sehingga hasilnya seperti ini.

<b:includable id='comment-form' var='post'/>

#Langkah 5
Lakukan cara yang sama pada seluruh kode yang diberi kolom pada gambar di Langkah 3. Sehingga hasilnya akan seperti pada gambar berikut ini.