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).