Cara Terbaru Memasang Komentar Disqus di Blogger Valid HTML5

Tutorial kali ini adalah cara memasang komentar Disqus di blogger atau blogspot dengan mudah dan valid HTML5. Memang dalam pemasangan seperti yang ditunjukkan oleh pihak Disqus di webistenya cukup jelas dan mudah dipahami langkah-langkahnya. Namun, perlu kita tahu bersama bahwa kode yang diberikan oleh Disqus tersebut belum valid HTML5, yang diakibatkan beberapa baris kode yang mengandung css style dari widget komentar Disqus ini.

Begitupun beberapa tutorial yang bertebaran di mesin pencari, masih menggunakan cara yang lama dan jelas belum valid HTML5. Seperti yang saya singgung di atas, bahwa cara membuat komentar Disqus untuk platform blogger/blogspot cukup mudah, yaitu kode widgetnya akan terpasang di sidebar atau gadget template blog. Namun, sekali lagi saya tekankan bahwa cara ini tidak baik untuk loading blog.

Baca juga: Membuat Sitemap dengan Tag NEW Pada Label yang Mendapat Artikel Baru

Dengan cara itu, widget komentar tersebut hanya akan menyumbang loading blog menjadi berat. Untuk itu, kita perlu mengurai css style dari widget komentar Disqus ini agar valid HTML5 dan proses loading blog menjadi lebih ringan.

Cara Terbaru Memasang Komentar Disqus di Blogger Valid HTML5

Nah, jika anda berminat mengganti komentar default dengan komentar Disqus di blogspot anda, silahkan registrasi terlebih dahulu di https://disqus.com/admin/signup/?utm_source=New-Site. Setelah itu, sebelum memasang kode widget komentar ini di blog anda, perhatikan cara pemasangan yang benar berikut ini.

Pastikan anda sudah selesai membuat akun dan login di Disqus, silahkan klik icon gerigi (settings) > Add Disqus To Site, isikan data yang diminta sesuai blog anda, lalu klik Finish registration untuk melanjutkan ke tahap selanjutnya. Kemudian anda akan dibawa ke halaman selanjutnya dan klik Universal Code, kemudian cari kode seperti ini var disqus_shortname = 'usernameanda'; sebab kita memerlukan username (akun anda) dari kode tersebut.

Silahkan ganti kode yang ditandai pada script di bawah ini dengan username anda tadi, gunakan notepad untuk mengedit kode.
             <script type='text/javascript'>
                var disqus_shortname = &quot;bungfrangkicom&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>

Tahap selanjutnya kita akan menerapkannya di blogger melalui edit HTML. Paste kode yang sudah di edit tadi di bawah kode berikut ini:
              <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>

Jangan lupa untuk menghapus seluruh css #comments beserta embel-embelnya yang ada di atas ]]></b:skin> atau </style> dan gandi dengan kode di bawah ini:
#comments {display:none;margin:10px 15px }
.post-comment-link { visibility: hidden; }

Jika sudah selesai, silahkan simpan template blog anda.

Langkah selanjutnya adalah mengimpor seluruh komentar blogger ke komentar Disqus dan mensingkronkannya dengan cara klik gerigi (settings) > Admin > Discussions > Blogger > lanjutkan dengan mengklik dan menyelesaikan tombol ‘Import comments from Blogger’ dan ‘Enable syncing’ pada halaman tersebut.

Sayangnya saat ini kedua tombol tersebut belum bisa digunakan diakibatkan oleh pihak Disqus belum mengupdate API terbaru google.

Update: 2 September 2015
Kini disqus sudah bisa import komentar di blogger/blogspot.

Berikutnya adalah memasang script penghitung komentar Disqus di blog, baca tutorialnya pada Cara Menampilkan Jumlah Komentar Disqus di Blog.

Demikian cara terbaru membuat komentar Disqus untuk blogger atau blogspot. Cukup mudah bukan? Selamat mencoba. [Sumber: KompiAjaib]

Advertisement