Disqus adalah salah satu alternatif terbaik jika kita ingin mengganti komentar default Blogger.
Selain memiliki tampilan yang lebih keren, Disqus juga memiliki fitur tambahan yang tidak dimiliki komentar bawaan Blogger. Dan jika kamu memiliki banyak blog sekaligus, Disqus patut kamu pertimbangkan karena bisa digunakan untuk memoderasi komentar dari banyak blog sekaligus hanya dari satu tempat saja.
Sayangnya memasang Disqus di Blogspot memiliki satu kekurangan penting, yaitu membuat loading blog menjadi lambat. Dari percobaan saya sebelumnya, memasang Disqus membuat hasil test pagesped via GTMetrix blog saya menurun drastis dari 90% ke 62%! Wow, padahal komentar Disqus saya masih kosong. Kebayang kan bagaimana lambatnya jika komentar Disqus sudah dipenuhi puluhan komentar.
Untungnya, ada cara untuk mengakali hal ini, salah satunya adalah dengan memasang lazy load Disqus. Dengan teknik ini, Disqus hanya akan diload saat dibutuhkan saja. Yaitu ketika pengunjung sudah scroll sampai ke area komentar.
Nah, sebagai cara alternatif, kamu juga bisa membuat tombol On-Click Load Disqus agar komentar Disqus hanya muncul saat kita menekan tombol tertentu saja.
Daftar Isi
Cara Memasang Komentar Disqus dengan Tombol Click Load
Sebelum memasang tombol on click load Disqus, jangan lupa untuk membuat backup template Blogger kamu dulu yah! Jika sudah, silahkan ikuti langkah-langkah berikut ini.
1. Hapus Kode Disqus Lain
Jika kamu pernah memasang kode lain seperti kode lazy load Disqus, hapus kode tersebut terlebih dahulu.
2. Ganti Kolom Komentar Bawaan Blogger dengan Disqus
Untuk melakukannya, masuk ke dasbor Blogger dan buka template Blogger kamu. Setelah itu cari kode berikut ini.
<b:includable id='comments' var='post'>
<kode komentar Blogger>
</b:includable>
Jika sudah ketemu, hapus kode tersebut lalu ganti dengan kode Disqus di bawah ini.
Btw ganti dulu YOUR_DISQUS_SHORTNAME dengan nama shortname Disqus kamu sendiri. Jika tidak, akan muncul error “We are unable to load Disqus …”
<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 = 'YOUR_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>
3. Letakan Tombol Click Load Disqus di Akhir Artikel
Untuk meletakan tombol on-click load komentar Disqus di akhir artikel, cari tag </article> lalu masukan kode ini tepat di atas tag 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>
4. Percantik Tampilan Widget Komentar Disqus
Sebagai langkah terakhir, kita bisa merapikan tampilan widget komentar Disqus menggunakan kode CSS. Untuk melakukannya, cari tag </style> lalu tambahkan kode CSS berikut ini
/* Tombol On-Click Load Disqus*/
#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}
Jika sudah, simpan perubahan pada tema.
Sampai sini prosesnya sudah selesai. Kamu bisa mengecek bagian akhir artikel kamu dan lihat tombol Disqus yang terpasang di sana.
Saat diklik, barulah komentar Disqus muncul. Dengan begitu, blog kita tidak akan me-load Disqus terlebih dahulu sebelum dibutuhkan. loading blog pun menjadi lebih cepat dengan satu trik sederhana ini.
