Tutorial Blogger kali ini ihwal cara memasang widget Disqus comment dengan fungsi onclick load. Artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta aneka macam komentar tersebut akan ditampilkan bila 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 menyerupai diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, ketika halaman postingan tersebut dibuka. Apalagi bila 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”, kemudian seluruh konten komentar tersebut akan terbuka seutuhnya sesudah pengunjung mengklik tombol onload komentar Disqus.
Caranya memasangnya yaitu sebagai berikut!
Hapus arahan tersebut, kemudian ganti dengan arahan di bawah ini:
Untuk meletakkan tombol onclick load komentar Disqus, silahkan cari arahan
Sekarang tinggal merapikan tampilan widget komentar Disqus, silahkan letakkan arahan berikut ini di atas arahan
Simpan theme.
Simak juga: Cara Memasang Komentar Disqus Permanen di Blogspot
Demikian tutorial ihwal Cara Memasang Komentar Disqus dengan Tombol Onclick Load. Semoga membantu dan selamat mencoba!
Memasang tombol load komentar Disqus dengan fungsi onclick event ini ialah salah satu cara mempercepat loading blog. Karena menyerupai diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, ketika halaman postingan tersebut dibuka. Apalagi bila 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”, kemudian seluruh konten komentar tersebut akan terbuka seutuhnya sesudah pengunjung mengklik tombol onload komentar Disqus.
Caranya memasangnya yaitu sebagai berikut!
Cara memasang komentar Disqus dengan fungsi tombol onclick event
Masuk ke Dashboard Blogger > Edit HTML. Cari arahan berikut ini:<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>
Hapus arahan tersebut, kemudian ganti dengan arahan 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('screen and (min-width: 350px)');if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = 'DISQUS_SHORTNAME'; //Add your shortname here
var disqus_url = disqus_blogger_current_url;
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>"; }
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
function disqus() {
if (!disqus_loaded) {
disqus_loaded = true;
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0])
.appendChild(e);
//Hide the button after opening
document.getElementById("show-comments").style.display = "none";document.getElementById("comments-block").style.display = "block";
}
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length > 8) {
if (hash.substring(0, 8) == "comment-") {
disqus();
}}}
</script>
</div>
</b:includable>
Perhatian:
Ganti arahan DISQUS_SHORTNAME yang ditandai pada arahan di atas dengan Disqus shortname untuk blog Anda.
Ganti arahan DISQUS_SHORTNAME yang ditandai pada arahan di atas dengan Disqus shortname untuk blog Anda.
Untuk meletakkan tombol onclick load komentar Disqus, silahkan cari arahan
</article> kemudian letakkan arahan berikut di atas arahan 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 arahan berikut ini di atas arahan
</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 menyerupai ini “We were unable to load Disqus………” itu berarti Disqus shortname/username yang Anda masukkan salah.
- Jika tombol onclick load tidak sanggup menampilkan widget komentar Disqus, silahkan hapus terlebih dahulu arahan yang berkaitan dengan Disqus sebelumnya (sebelum menerapkan cara ini).
Simak juga: Cara Memasang Komentar Disqus Permanen di Blogspot
Demikian tutorial ihwal Cara Memasang Komentar Disqus dengan Tombol Onclick Load. Semoga membantu dan selamat mencoba!
Advertisement