Cara Pasang Komentar Disqus Di Blog Valid HTML5

Cara Pasang Komentar Disqus Di Blog Valid HTML5 - Saat ini, pengguna disqus sebagai kotak komentar utama menjadi semakin banyak diminati oleh para pemilik website dan blog. Pemasangan kolom komentar ini menjadi semakin populer. Mulai dari kalangan blogger pemula bahkan sampai pada blogger professional menggunakan sistem disqus comment sebagai sistem komentarnya.

Hampir dapat dipastikan bahwa disqus menjadi salah satu widget pihak ketiga paling berpengaruh didunia website saat ini. Begitu banyak keunggulan yang bisa ditawarkan dari sistem komentar ini yang membuat para blogger ataupun pemilik website tertarik untuk memasang Kotak komentar disqus sebagai sistem komentar mereka. Bagaimana dengan Anda, apakah Anda juga tertarik untuk memsangnya pada blog Anda?. Jika memang iya, maka Anda sudah membaca turorial yang tepat.

Mengapa Memilih Disqus Sebagai Kolom Komentar Blogspot?
Jika Anda adalah seorang blogger yang memang ingin blognya terlihat keren dan berkelas, maka menambahkan kolom komentar disqus adalah pilihan yang sangat tepat. Turorial ini hanya akan berjalan apabila Anda sudah memiliki akun disqus atau sudah pernah mendapaftar disqus sebelumnya. Jika belum, silakan baca artikel sebelumnya tentang Cara Daftar Disqus. Dan setelah itu, komentar bawaan blogger otomatis akan tergantikan. Tapi tidak sampai disitu saja, karena  penginstalan plugin diqus belum rampung sepenuh, dan juga masih belum bekerja mkasimal. makanya tetap ikuti tutorial dibawah ini.

Cara Memasang Komentar Disqus di Blogger

Pada tahap akhir, setelah proses instalasi komentar disqus, script ditambahkan secara otomatis dan masuk ke widget HTML sidebar . Secara default Anda akan menemukan kode seperti dalam HTML.

<script type='text/javascript'>
var disqus_shortname = &#39;dewaplokis&#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;'>
<style type='text/css'>
#comments {display:none;}
</style>
<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>

Namun ternyata penambahan pada widget itu tidak memenuhi kriteria validasi dari wc3 validator alias tidak valid HTML5, Maka Kemudian jika ingin kolom komentar disqus ini valid HTML5 maka harus dipindahkan pada posisi yang benar dan sedikit merubah kode scriptnya.
Silakan cari kode dibawah ini

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

Setelah ketemu, copy dan letakkan kode berikut ini tepat dibawahnya.

<script type='text/javascript'>
                var disqus_shortname = &quot;dewaplokis&quot;;
                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;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.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(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.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(bloggerjs);
                })();
                </script>

Maka tampilan pada HTML template blog Jadinya seperti ini

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
<script type='text/javascript'>
                var disqus_shortname = &quot;dewaplokis&quot;;
                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;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.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(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.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(bloggerjs);
                })();
                </script>

Ganti dewaplokis dengan akun disqus milik Anda. 

Anda mungkin sudah bisa melihat perbedaan kedua kode komentar disdiatas, terutama untuk script pertama bawaan widget disqus bagian penambahan CSS

<style type='text/css'>
#comments {display:none;}
</style>

Sementara Pada kode css disqus yang kedua, style CSS tidak ditambahkan namun ditempatkan dan ditambah satu kode css lagi pada tempat terpisah, yaitu sebelum kode ]]></b:skin> atau </style>

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

Silakan save template Anda dan lihat hasilnya.

Demikian turorial kali ini tentang Cara Pasang Komentar Disqus Di Blog Valid HTML5, selamat mencoba, semoga sukses.

Referensi : https://www.kompiajaib.com/2015/04/cara-pasang-komentar-disqus-valid-html5.html

Share