Memasang Komentar Disqus Valid HTML5 di Blogger

Memasang Komentar Disqus Valid HTML5 di Blogger

Beberapa waktu yang lalu saya telah membagikan tutorial memasang komentar disqus dengan mudah, hanya dengan klik logo blogger di Disqus maka widget komentar disqus akan terpasang otomatis di blog. Namun sangat disayangkan widget komentar disqus tersebut belum sepenuhnya valid HTML5 karena di dalam widget tersebut mengandung css style. Selain itu, widget tersebut juga menyebabkan loading blog menjadi berat.

Saat ini saya akan memberikan tutorial termudah memasang komentar disqus valid HTML5 dan dapat meringankan loading blog.  Jika Anda tertarik untuk mencoba trik ini, silahkan ikut langkah-langkahnya di bawah ini.

Untuk menerapkan langkah-langkah ini Anda harus sudah memiliki akun Disqus, jika belum silahkan buat di sini https://disqus.com/admin/signup/

Setelah berhasil mendaftar, silahkan login di Disqus > klik tombol “setting” yang berikon gerigi (setting) di pojok kanan atas > klik tulisan Add Disqus To Site > klik Start Using Engage dan silahkan isi form yang tersedia sesuai dengan blog Anda > klik Finish registration > Akan muncul tampilan baru, klik Universal Code > Salin kode seperti ini var disqus_shortname = ‘wahyupratama’; Saat ini yang Anda perlukan hanya username Disqus milik Anda dari kode tersebut (mis. wahyupratama).

Cara Memasang Komentar Disqus Valid HTML5 di Blogger

Kemudian silahkan masuk ke Blogger > Edit HTML > Salin kode di bawah ini.

<script type='text/javascript'>
var disqus_shortname = &#39;wahyupratama&#39;;
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:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:if>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>

Ganti wahyupratama dengan username Disqus milik Anda yang tadi telah Anda salin sebelumnya.

Kemudian letakkan kode di atas tepat di bawah kode berikut ini.

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

Setelah itu letakkan kode css di bawah ini di atas kode ]]></b:skin> atau </style> untuk menyembunyikan komentar default blogger.

#comments {display:none;}
.post-comment-link { visibility: hidden; }

Silahkan simpan template Anda dan lihat hasilnya pada halaman postingan blog Anda.

Untuk menambahkan disqus recent comments widget pada blog Anda, Anda bisa membaca tutorialnya pada Menambahkan Disqus Recent Comments Widget pada Blogger.

Semoga bermanfaat.

Leave a Reply