Updated: Cara Memasang Komentar Disqus Permanen Di Blogspot/Blogger Terbaru

Tutorial blog kali ini wacana cara memasang komentar Disqus di blog platform Blogger/blogspot terbaru. Karena kita akan memasang komentar Disqus ini secara permanen, maka segala fitur atau semua script komentar bawaan blogger akan dihapus atau dihilangkan.

Hal ini bertujuan untuk menciptakan blog lebih cepat diakses dari sebelumnya. Kita ketahui bahwa script komentar bawaan blogger itu memakan space baris aba-aba yang cukup banyak. Hal ini pun yang membebani loading blog, mulai dari homepage lebih-lebih di halaman post atau post page.

Baca jug: Inilah Kelebihan Komentar Disqus yang Perlu Anda Ketahui

Karena cara kali ini memasang komentar Disqus secara permanen, maka berarti anda saya anggap sudah tidak tertarik lagi untuk memakai komentar bawaan blogger. Entah itu komentar orisinil dari blogspot atau komentar blogspot yang sudah di custom sedemikian rupa. Dengan kalimat lain, anda tidak akan mau kembali lagi memakai komentar bawaan blogger/blogspot tersebut. Berikut caranya.

Cara memakai komentar Disqus di Blogspot secara permanen

Sebelum melaksanakan langkah-langkah berikut ini, pastikan anda sudah memiliki akun di Disqus. Jika belum, silahkan simak terlebih dahulu tutorial wacana Cara Terbaru Memasang Komentar Disqus di Blogger Valid HTML5, kemudian ikuti langkah-langkah berikut ini.

#Langkah 1
Pastikan Anda sudah menciptakan akun Disqus dan sudah mendapat SHORTNAME untuk komentar Disqus blog yang ingin dipasangin widget komentar Disqus.

#Langkah 2
Temukan aba-aba berikut ini.

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

Kemudian ciutkan aba-aba itu, sehingga menjadi ibarat ini.

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

Hapus seluruh aba-aba yang diciutkan tersebut, kemudian ganti dengan aba-aba berikut ini:

    <b:includable id='comments' var='post'/>
    <b:includable id='DisqusComment' var='post'>
<div class='commentsDisqus' id='commentsDisqus'>
<script type='text/javascript'>
var disqus_url = disqus_blogger_current_url;
var disqus_blogger_current_url = &quot;<data:post.url.canonical.jsonEscaped/>&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>
  </div>
</b:includable>

#Langkah 3
Cari aba-aba </article> kemudian letakkan aba-aba berikut ini di atas aba-aba tadi:

    <!-- Comments -->
    <b:include cond='data:view.isPost' data='post' name='DisqusComment'/>

Perhatian:
Jika ingin juga menampilkan komentar Disqus di halaman static, silahkan ubah aba-aba tag conditional ini data:view.isPost dengan data:view.isSingleItem pada #Langkah 3 tersebut.

#Langkah 4
Letakkan aba-aba berikut ini di atas aba-aba </body> atau  &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
            <script type='text/javascript'>
            var disqus_shortname = &#39;bungfrangki&#39;;
             (function() {
              var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
              dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
              (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
             })();
            </script>
</b:if>

Catatan:
Ganti shortname bungfrangki pada aba-aba tersebut dengan shortname komentar Disqus Anda.

Sebetulnya, hingga pada tahap ini, pemasangan komentar Disqus di blog sudah selesai. Selanjutnya yaitu langkah abolisi script/kode komentar Blogger yang sudah tidak diperlukan lagi.

#langkah 5
Untuk memulai langkah abolisi aba-aba dari komentar bawaan blogger sebelumnya, silahkan lakukan langkah-langkah berikut ini.

Untuk itu, anda perlu menciutkan seluruh widget pada Blog1. Sehingga karenanya terlihat kurang lebih akan ibarat pada gambar ini.

Kode pada kolom merah di atas ialah fitur pendukung komentar bawaan blogger dan  kode yang diberi tanda biru ialah aba-aba share button bawaan blogger yang sering tidak dimanfaatkan oleh kebanyakan blogger.

Kita akan menghilangkan script yang terisi pada tiap-tiap includable yang ditandai pada gambar di atas.

#langkah 6
Cara menghilangkannya ialah, contohnya kita akan menghapus script pada includable <b:includable id='comment-form' var='post'>

Yang kurang lebih kode/script di dalamnya ibarat 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>

Hapus aba-aba yang diblock (kuning) di atas. Lalu pada aba-aba yang diberi garis bawah, berikan aba-aba / sebagai penutupnya. Sehingga karenanya ibarat ini.

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

#Langkah 7
Lakukan cara yang sama pada seluruh aba-aba yang diberi kolom pada gambar di Langkah 3. Sehingga karenanya akan ibarat pada gambar berikut ini.

#Langkah 8
Simpan template, dan lihat hasilnya.

Demikian tutorial Blogger wacana cara memasang komentad Disqus pada blogspot/Blogger terbaru. Selamat mencoba, kalau ada pertanyaan silahkan tuliskan di kolom komentar.

Advertisement