Memasang Komentar "Disqus" Permanen Di Blog Valid HTML5

Waktu itu saya sudah membagikan tutorial cara menampilkan komentar teratas disqus di sidebar blogger. Kali ini saya akan memberikan tutorial untuk Anda cara memasang komentar disqus permanen di blog valid HTML5.

Dengan memasang komentar disqus valid HTML5 ini, loading blog Anda akan semakin kencang. Saya mengambil kode ini dari blog.kangismet.net (Nyuhungkeun ridho na kang, hehe). Jika berminat memasang komentar disqus, silahkan simak tutorial saya kali ini dengan baik.

Pertama silahkan copy kode dibawah ini dan paste dahulu di notepad Anda. Ganti yang saya tandai warna merah dengan username disqus blog Anda:

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

Jika sudah, Anda masuk menu template pilih edit HTML lalu cari kode yang mirip seperti ini.

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

Lalu Anda ciut kan (►) kode tersebut, sehingga akan menjadi seperti ini.

<b:includable id='comments' var='post'>…</b:includable>

Anda block dengan cursor mouse atau hapus seluruh kode tersebut dan paste kan kode yang tadi sudah Anda copy ke notepad.

Masih belum selesai, tahan dulu.

Selanjut Anda hapus seluruh script komentar bawaan blogger.
Kira-kira kode nya seperti digambar ini.
Kode yang saya tandai merah adalah script komentar bawaan blogger. Dan yang saya tandai hitam adalah script share button bawaan blogger yang kebanyakan sudah tidak dipakai oleh para blogger karena bawaan template yang mereka download.
Kita akan menghapus script-script yang terisi pada tiap includable yang saya tandai pada gambar diatas.

Cara menghapusnya (jangan semua nya awas, nanti malah butuh lagi).
Kita hanya akan menghapus misalnya menghapus script pada includable <b:includable id='comment-form' var='post'>
Kurang lebih kode script di dalam nya seperti ini.

        <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>

Anda hapus semua yang saya tandai dengan warna merah. Kemudian pada kode script yang tersisa yang warna putih itu Anda beri garis miring (/) sebelum kode (>) sebagai penutupnya, sehingga script nya akan seperti ini.

 <b:includable id='comment-form' var='post'/>

Lakukan cara yang sama pada script-script lainnya yang menurut Anda tidak berguna terpasang di template Anda.

Jika semua nya sudah, silahkan Anda simpan template nya, dan selesai. Kini disqus valid HTML5 sudah terpasang secara permanen di blog Anda. Jika ada yang kurang mengerti silahkan berkomentar saya akan langsung balas dan membantu sebisa nya.

All Source: blog.kangismet.net & www.bungfrangki.com