Cara Memasang Lazy Load Disqus Comments di Blogger Dengan Mudah

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Memasang Lazy load Disqus Comments di Blogger dengan mudah, cara satu ini bertujuan untuk mempercepat loading blog ketika blog kamu sedang dikunjung visitor dan cara kerjanya pun hampir sama dengan Lazy load iklan adsense.

Namun, Cara memasang lazy load disqus comments ini maka andilnya hanya menurunkan kecepatan situs dan situs anda akan gugur dari search google, kenapa demikian dikarenakan kelengkapan fitur yang ditawarkan seirama dengan kelemahannya yang akan membuat kecepatan blog kamu menjadi lambat.

Cara Memasang Lazy Load Disqus Comments di Blogger Dengan Mudah

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk kemenu TEMA > klik Edit HTML
3. Silahkan kamu cari kode berikut ini <b:includable id='commentPicker' var='post'> atau <b:includable id='commentPicker' var='post'/> apabila sudah ketemu silahkan tambahkan tag div berikut ini dibawahnya.

<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'>
  <div id='disqus_empty'/>
</div>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><b:include data='post' name='disqus-comment'/></b:if>
</b:if>

4. Selanjutnya silahkan kamu tambahkan kode berikut ini tepat DIATAS kode <b:includable id='comments' var='post'><b:includable id='comments' var='post'/>

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
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;;
</script>
</b:includable>

5. Apabila kamu menemukan kode berikut ini <b:includable id='commentPicker' var='post'/> maka hapus kode tersebut dan ganti menjadi seperti dibawah ini.

<b:includable id='commentPicker' var='post'>
<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'>
  <div id='disqus_empty'/>
</div>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><b:include data='post' name='disqus-comment'/></b:if>
</b:if>
</b:includable>

Untuk template Blogger yang masih menggunakan komentar versi lawas, silahkan temukan kode <b:includable id='comment_picker' var='post'> atau <b:includable id='comment_picker' var='post'/>. Lalu ikuti langkah meletakkan kode form komentar Disqus seperti di atas.

5. Selanjutnya, silahkan kamu tambahkan kode dibawah ini tepat DIATAS kode </body>

<b:if cond='data:view.isSingleItem'>
<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('YOUR_DISQUS_SHORTNAME');
    console.log('Disqus loaded.');
  }
}, false);
//]]>
</script>
</b:if>

6. Silahkan kamu ganti YOUR_DISQUS_SHORTNAME Dengan shortname disqus untuk blog anda.
7. Langkah terakhir silahkan kamu tambahkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

#disqus_thread{margin:25px auto;  padding: 10px; background-color:#fff;}

8. Kalau sudah silahkan klik SIMPAN dan Selesai.

Demo

Bagaimana mudah bukan untuk tutorial Cara Memasang Lazy Load Disqus Comments di Blogger Dengan Mudah, apabila kamu ingin melihat bagaimana cara kerjanya silahkan klik link demo diatas dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.