Cara Mudah Memasang Komentar Disqus di Blogspot

Pada kesempatan kali ini adalah tentang tutorial bagaimana cara memasang komentar Disqus di blogger atau blogspot dengan mudah dan 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 dan ganti tulisan USERNAME-ANDA dengan username anda tadi, gunakan notepad atau wordpad untuk mengedit kodenya. Berikut kodenya :

<script type='text/javascript'>
                var disqus_shortname = &quot;USERNAME-ANDA&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>

Langkah selanjutnya adalah kita akan menerapkannya di blogger melalui edit HTML, untuk lebih cepat gunakan ctrl+F untuk mencari kodenya. Lalu 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 yang ada di atas ]]></b:skin > dengan kode dibawah ini :

#comments {display:none;margin:10px 15px }
.post-comment-link { visibility: hidden; }

Terakhir adalah simpan template. Selamat mencoba dan semoga berhasil...