Cara mudah memasang komentar disqus valid HTML5 blogger

Zulmy Eve       February 16, 2016       Add Comment       Blogger       Tips       Widget

Cara mudah memasang komentar disqus pada blogger valid HTML5

Sedikit banyaknya para blogger hampir semua menggunakam sistem komentar disqus pada blognya terutama platform blogger. Akan tetapi, setelah review kesana kemari tidak hanya platform blogger saja, ternyata website-website besar pun menggunakannya.

Lalu apa kelebihan memasang komentar disqus?

Selain tampilannya yang menarik, disqus tergolong sangat ringan dan mudah digunakan sehingga memudahkan diskusi antara si author dan si komentator komentator lainnya. Namun hanya saja tidak ada fitur emoticon. Jika ada, mungkin sudah menjadi widget komentar terbaik.

Memasang komentar disqus di blog sangat mudah, dengan menekan tombol tambahkan disqus ke situs dan menambahkan embel embelnya, otomatis widgetnya akan terpasang pada tata letak. Namun dengan sangat mudahnya itu, membuat widgetnya tidak valid HTML5.

Disqus comment widget

Bagaimana  cara agar komentar disqus valid HTML5?

Sesuai judulnya terbilang sangat mudah juga, langkah pertama yang harus dilakukan pastikan sudah mempunyai akun disqus. Jika belum silahkan daftar di http://www.disqus.com.

Selanjutnya masuk ke halaman utama disqus dan klik tombol gear lalu Add Disqus To Site.

Lanjutkan dengan menekan tombol Install on Your Site tepat di atas kanan halaman. Lalu akan muncul form yang harus di isi seperti ini

Site name silahkan di isi dengan judul blogmu dan unique disqus URL itu akan menjadi alamat disqus blogmu katakalah nama pengguna, seperti contoh di atas misal blahblahblah dan silahkan salin nama pengguna tersebut lalu tempel di notepad. Pilih category sesuai blog dan klik next.

Sampai disini step pada disqus selesai, selanjutnya masuk blogger dan edit template lalu salin kode javascript berikut dan sisipkan sebelum kode </body>

<script type='text/javascript'>
    var disqus_shortname = &#39;blahblahblah&#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 blahblablah dengan nama pengguna yang sebelumnya disimpan di notepad, langkah terakhir simpan template dan lihat hasilnya.
Namun pada saat memuat komentar disqus, komentar bawaan blogger akan muncul terlebih dahulu dan otomatis terganti dengan komentar disqus. Cara mengatasinya adalah menyambunyikan komentar bawaan blogger.

Silahkan edit template ulang lalu cari atau cara cepatnya dengan menekan CTRL+F dan ketikan #comments lalu tambakan display:none; pada elemen tersebut sehingga akan terlihat #comments{......;......;......;display:none;}.
Save template, dan lihat hasilnya kembali. Semoga bermanfaat.

Baca juga:

Zulmy Eve

Empat tahun menggeluti dunia pemerograman membuat saya ingin mencoba untuk berbagi.