Membuat Komentar Disqus dengan Tombol Onclick Load

Tutorial Blogger kali ini tentang cara memasang widget Disqus comment dengan fungsi onclick load. Artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus.

Memasang tombol load komentar Disqus dengan fungsi onclick event ini ialah salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya.

Dengan adanya tombol load Disqus comments, maka pemuatan komentar Disqus akan “tertunda”, lalu seluruh konten komentar tersebut akan terbuka seutuhnya setelah pengunjung mengklik tombol onload komentar Disqus.

Caranya memasangnya adalah sebagai berikut!

Cara memasang komentar Disqus dengan fungsi tombol onclick event

Masuk ke Dashboard Blogger > Edit HTML. Cari kode berikut ini:

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

Hapus kode tersebut, lalu ganti dengan kode di bawah ini:

    <b:includable id='comments' var='post'>
  <div class='comments-block' id='comments-block'>
<div id='disqus_thread'/>
<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 350px)&#39;);if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = &#39;DISQUS_SHORTNAME&#39;; //Add your shortname here
var disqus_url = disqus_blogger_current_url;
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 disqus() {
    if (!disqus_loaded)  {
        disqus_loaded = true;
        var e = document.createElement(&quot;script&quot;);
        e.type = &quot;text/javascript&quot;;
        e.async = true;
        e.src = &quot;//&quot; + disqus_shortname + &quot;.disqus.com/embed.js&quot;;
        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0])
        .appendChild(e);
        //Hide the button after opening
        document.getElementById(&quot;show-comments&quot;).style.display = &quot;none&quot;;document.getElementById(&quot;comments-block&quot;).style.display = &quot;block&quot;;
    }
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length &gt; 8) {
    if (hash.substring(0, 8) == &quot;comment-&quot;) {
        disqus();
    }}}
</script>
  </div>
</b:includable>

Perhatian:
Ganti kode DISQUS_SHORTNAME yang ditandai pada kode di atas dengan Disqus shortname untuk blog Anda.

Untuk meletakkan tombol onclick load komentar Disqus, silahkan cari kode </article> lalu letakkan kode berikut di atas kode tersebut:

<b:if cond='data:view.isPost'>
<div class='comments-blocks'><button id='show-comments' onclick='disqus();return false;' tabindex='0'>Load Comments</button></div>
</b:if>

Sekarang tinggal merapikan tampilan widget komentar Disqus, silahkan letakkan kode berikut ini di atas kode </style>

/* Disqus comment onclik load button – by Bungfrangki.com */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
.comments-blocks button{display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;text-transform:uppercase;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:# 3371d6;border-radius:2px}
.comments-blocks button:hover{background:#02b62bc}

Simpan theme.

Catatan:

• Jika seluruh langkah di atas sudah diterapkan tapi seluruh konten komentar tidak tampil, yang muncul hanyalah pesan seperti ini “We were unable to load Disqus………” itu berarti Disqus shortname/username yang Anda masukkan salah.
• Jika tombol onclick load tidak bisa menampilkan widget komentar Disqus, silahkan hapus terlebih dahulu kode yang berkaitan dengan Disqus sebelumnya (sebelum menerapkan cara ini).

Simak juga: Cara Memasang Komentar Disqus Permanen di Blogspot

Demikian tutorial tentang Cara Memasang Komentar Disqus dengan Tombol Onclick Load. Semoga membantu dan selamat mencoba!