Cara Memasang Disqus dan Lazy Load Disqus di Blogger

Apa Itu Disqus ?
Disqus merupakan platform komunikasi online populer yang menyediakan sistem komentar atau diskusi yang dapat anda gunakan pada berbagai platform website. Untuk website sekarang penggunaan komentar Disqus dapat menjadi alternatif terbaik karena banyak fitur-fitur yang jauh lebih baik apabila dibandingkan dengan sistem komentar bawaan pada Blogger yang terkesan jadul.

Cara Membuat Disqus dan Memasangnya Di Blogger
Kali ini kita akan belajar cara membuat dan memasang kolom komentar Disqus yang keren dengan mengganti Kolom komentar blogger yang klasik dan tampilannya yang usang. Nah untuk membuatnya caranya sangat mudah ikuti tutorial berikut:

1. Silahkan anda login ke disqus melalui tautan berikut:

https://disqus.com/

2. Klik Get Started dan akan tampil 2 pilihan yaitu "I want to comment on sites" dan "I want to install Disqus on my site". Pilihlah yang ke 2 yaitu "I want to install Disqus on my site".

3. Kemudian masukkan nama website Anda, pilih juga Kategori website anda. Lalu klik Create Site untuk membuat Disqus.

4. Kemudian ada 4 pilihan menu di pojok kiri atas. Pilih menu ke 2 yaitu Install Disqus. Disini kita akan memilih platform yang akan dipasang Disqus. Klik saja pada logo Blogger.

5. Setelah itu Scroll kebawah sampai ada tulisan add website to my Blogger site dan klik tulisan tersebut.

6. Selanjutnya Anda akan diarahkan ke Widget Blogger. Masukkan judul Widget dan klik Menambah Widget. Maka secara otomatis Komentar anda akan berubah menjadi Disqus. Tetapi ini belum selesai, lanjut ke tahap berikutnya.

7. Kembai ke Disqus, Klik Configure Diskus dan masukkan url website anda, country, bahasa dan lainnya sesuaikan saja.

8. Lanjut ke menu Setup Moderation, terdapat 2 pilihan yaitu Balanced dan Strict sesuaikan saja dengan keinginan anda.

9. Untuk settingan Moderasi di menu agar komentar dapat dilakukan oleh setiap orang, cukup ubah Pre-Moderation dari None ke All. Jangan lupa klik SAVE. dan Disqus siap digunakan.

Dan berikut merupakan tampilan komentar Disqus yang sudah jadi:

Apa itu Lazy Loading Disqus?

Disqus mungkin sudah sangat banyak ditemui pada situs-situs yang memakainya sebagai fitur komentar yang bagus. Karena, Disqus memiliki fiturnya yang lengkap dan menarik. Tetapi dibalik kelebihannya ternyata Disqus memiliki kekurangan yaitu dapat membuat kecepatan akses ke website anda menjadi lambat. Tetapi ada cara agar hal itu dapat diminimalkan yaitu dengan menggunakan Lazy Loading.

Lazy Loading Disqus merupakan sebuah cara supaya tampilan komentar Disqus yang sedikit berat tersebut akan dimuat hanya ketika scroll halaman saja, jadi teknisnya hal itu akan menunda pemuatan langsung Disqus supaya halaman dimuat terlebih dahulu sehingga dapat lebih cepat.

Nah, untuk mengatasi hal tersebut, berikut tips Cara Memasang Lazy Loading Disqus yang sistem kerjanya adalah menunda penampilan komentar atau kode script Disqus tidak dapat berfungsi sebelum kita men-scroll halaman sampai ke bagian komentar Disqus mulai terlihat.

Cara Memasang Lazy Load Disqus Pada Blogger

1. Masuk ke Dashboard Blogger Buka TEMA > Edit HTML >
Lalau carilah kode berikut ini:

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

2. Kemudian salin kode berikut ini dan letakkan tepat di bawah kode <b:includable id='comments' var='post'> tadi.

<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("YOUR-DISQUS-USERNAME"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>

3. Maka hasilnya akan terlihat seperti berikut ini :

<b:includable id='comments' var='post'>
<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("YOUR-DISQUS-USERNAME"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>
...
...
</b:includable>

NOTE: Ganti kode yang ditandai warna merah dengan username Disqus Blog anda.

5. Berikutnya untuk kode CSS berikut salin dan tambahkan sebelum </head>

<b:if cond='data:view.isPost'>
<style>
#disqus_thread{display:block;position:relative;overflow:hidden;padding:20px 0 0 0;margin:20px auto 0 auto;border-top:1px solid rgba(0,0,0,0.08)}#comments{display:none}
</style>
</b:if>

6. Terakhir jangan lupa, Klik Simpan Tema dan lihatlah perubahannya pada PageSpeedInsight atau lainnya.

Location:

Share :