Skip to HeaderSkip to PostSkip to Footer

Cara Memasang Komentar Disqus dengan Lazy Load di Blogger

Daftar Isi

    Cara Memasang Komentar Disqus dengan Lazy Load di Blogger - Kolom komentar Disqus adalah salah satu alternatif dari kolom komentar default bawaan Blogger. Kolom komentar Disqus banyak digunakan oleh blog-blog besar bahkan web-web besar karena beberapa manfaat. Beberapa diataranya:

    1. Punya fitur moderasi dan admin dimana kita bisa tambahkan orang lain sebagai admin khusus membalas komentar Disqus tanpa perlu memberi akses ke blog atau website.
    2. Ada fitur analytics. Berguna banget buat kamu yang sering olah data dari engangement user.
    3. Ada fitur eksternal keren seperti Related Post dan Smiley Respons.
    4. Beragam pilihan login mulai dari Email, sosmed, sampai komentar Anonim yang tidak perlu login.
    5. Bisa jadi penghasilan tambahan melalui Disqus Ads.

    Mungkin masih banyak manfaat lain dari komentar Disqus yang nggak saya sebutkan dan tentu masih banyak upgrade yang mungkin diberikan ke depannya.

    Sayangnya, dengan segala kemudahan yang ditawarkan tersebut, script bawaan untuk komentar Disqus ini terbilang besar dan cukup memakan waktu saat pertama kali halaman web dimuat.

    Namun, hal tersebut bisa diakali dengan menerapkan efek lazy load pada script asli bawaan Disqus. Untuk menerapkannya, silahkan ikuti panduan singkat berikut.

    Bahan yang diperlukan

    1. Koneksi Internet
    2. Blogger Blog
    3. Akun Blogger

    Alat yang diperlukan

    1. Komputer/ Laptop

    Estimasi Waktu: 5 menit.

    Panduan Pengerjaan

    Langkah 1 - Copy dan edit script ini

    Pertama, silahkan kamu copy script di bawah ini. Setelah itu, paste-kan di Notepad. Lalu, ganti username Ninura yang saya tandai dengan warna hijau dengan username Disqus kamu.

    <b:includable id='disqus-comment' var='post'>
    <div id='disqus_thread'><div id='disqus_empty'/></div>
    <script>
    //<![CDATA[
    function load_disqus( disqus_shortname ) {var y = document.getElementById('disqus_empty'),t = document.getElementById('disqus_thread'),e = document.createElement('script'),d = document.createElement('script'),h = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);if( t && y ) {e.type = 'text/javascript';e.async = true;e.src = '//' + disqus_shortname + '.disqus.com/embed.js';h.appendChild(e);d.type = 'text/javascript';d.async = !0;d.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js';h.appendChild(d);y.remove();}}window.addEventListener('scroll', function(e) {var currentScroll = document.scrollingElement.scrollTop;var t = document.getElementById('disqus_thread');if( t && (currentScroll > t.getBoundingClientRect().top - 150) ) {load_disqus('ninura');console.log('Disqus loaded.'); }}, false);
    //]]>
    var disqus_blogger_current_url = &quot;<data:blog.url.canonical/>&quot;;if (!disqus_blogger_current_url.length) {disqus_blogger_current_url = &quot;<data:view.url/>&quot;;}var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
    </script>
    </b:includable>

    Langkah 2 - Login ke Blogger

    Selanjutnya, silahkan kamu login ke akun Blogger kamu. Pilih blog yang ingin kamu pasangi script ini (jika kamu punya lebih dari satu blog).

    Langkah 3 - Masuk menu Theme, lalu masuk menu Edit HTML

    Jika kamu sudah ada di blog ya dimaksud, langsung saja buka menu Theme atau Tema lalu pilih opsi Edit HTML untuk masuk ke Template Editor.

    Langkah 4 - Cari salah satu tag ini

    Di halaman Template Editor, silahkan kamu klik script-mu, lalu tekan tombol CTRL+F untuk mengaktifkan fitur Find dari template Editor. Jika sudah muncul silahkan cari salah satu tag berikut ini:

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

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

    <b:includable id='comment-form' var='post'>

    Note: Pastikan tag yang kamu temukan ada di dalam widget Blog.

    Langkah 5 - Pastekan script di atas tag yang ditemukan

    Jika salah satu tag di atas sudah ketemu, silahkan kamu paste-kan script yang sudah kamu edit tepat di atas tag yang kamu temukan.

    Langkah 6 - Cari salah satu tag berikut

    Selanjutnya, silahkan kamu cari salah satu dari tag berikut ini.

     <b:include name='comment-picker'/>

    atau

    <b:include name='commentPicker'/>

    Jika tidak ketemu, coba kamu cari tag tersebut tanpa <b:include.

    Jadi, silahkan cari name='comment-picker' atau name='commentPicker'.

    Jika tidak ketemu juga, silahkan kamu cari <data:post.body/>.

    Langkah 7 - Paste-kan script ini sesuai kondisi

    Setelah ketemu salah satu tag di atas, silahkan kamu pastekan tag berikut sesuai kondisi.

    Jika kamu menemukan tag name='comment-picker' atau name='commentPicker', silahkan kamu ganti namenya menjadi name='disqus-comment' untuk menggantikan komentar bawaan dari Blogger. Jika, kamu tidak mau menggantikan komentar bawaan Blogger, silahkan kamu tambahkan script berikut tepat di atas tag yang kamu temukan.

    <b:include cond='data:view.isSingleItem' name='disqus-comment'/>

    Jika kamu mencari <data:post.body/>, silahkan kamu pastekan tag tersebut di bawah tag tersebut sehingga bentuknya kurang lebih akan menjadi seperti ini:

    <data:post.body/>
    <b:include cond='data:view.isSingleItem' name='disqus-comment'/>

    Jika kamu mencari <data:post.body/>, biasanya kamu akan menemukan lebih dari 1 tag, silahkan kamu pastekan saja di semua tag yang ditemukan.

    Jika kamu paham tentang struktur template, silahkan kamu tempatkan tag tersebut sesuai kebutuhan kamu.

    Langkah 8 - Save template

    Selesai. Terakhir, silahkan kamu save template kamu dan silahkan kamu cek hasilnya.

    Penutup

    Hasil

    Jika kamu menerapkan secara benar maka hasilnya akan menjadi seperti kolom komentar Disqus yang ada di blog ini. Komentar baru akan muncul setelah kamu scroll mendekati area kolom komentar sehingga loading konten menjadi tidak berat.

    Jika kolom komentar Disqus kamu tidak muncul, silahkan periksa lagi hasil kerja kamu, terutama pada langkah-langkah input. Perhatikan baik-baik note yang saya berikan.

    Modifikasi Komentar Disqus

    Untuk modifikasi, kamu bisa lakukan langsung melalui dashboard Disqus Admin Panel-nya langsung. Jika kurang paham, akan saya buatkan tutorial terpisah tentang itu.

    Mungkin itu saja yang bisa saya bagikan tentang cara memasang komentar Disqus dengan efek lazy load on scroll di blog Blogger. Jika dirasa ada yang kurang jelas, silahkan sampaikan saja melalui kolom komentar. Semoga bermanfaat dan sampai jumpa di tulisan saya lainnya.

    Komentar

    Posting Komentar

    Harap berikan komentar yang relevan dengan topik tulisan.
    Jangan menyertakan link yang tidak berhubungan dengan konten tulisan. Apabila komentar mengandung link (apalagi yang tidak relevan), maka komentar akan dihapus.
    Budayakan sopan santun, hindari penggunaan bahasa yang provokatif, SARA, pornografi.
    Kritik dan saran yang membangun untuk konten ataupun untuk blog sangat berarti bagi Ninura.