Sunday, April 2, 2017

Memasang Komentar Disqus Secara Loan on Scroll di Blogger

Memasang Komentar Disqus Secara Load on Scroll di Blogger

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang cara memasang komentar disqus secara load on scroll, artinya komentar disqus hanya akan muncul ketika layar digulung (scroll) menuju ke bagian komentar yang ada di bagian bawah.

Disarankan sebaiknya sobat sudah pernah memasang komentar disqus dengan cara biasa (yaitu melalui situs Disqus) supaya sobat memahami penggunaannya.

Memasang Disqus Load on Scroll di Blogger

Untuk mulai memasang disqus load on scroll di blog pertama-tama, silakan login ke blog sobat kemudian pada menu Tema pilih Edit HML, lalu temukan kode <b:includable id='comments' var='post'>.

Memasang Komentar Disqus Secara Load on Scroll di Blogger

Kemudian blok seluruh kode tersebut dari awal hingga penutupnya, untuk lebih mudahnya ciutkan hingga kodenya menjadi seperti <b:includable id='comments' var='post'>…</b:includable>. Kemudian ganti kode tersebut dengan kode dibawah ini.

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
 <span class='post-comment'><a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments'/></span>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script type='text/javascript'>
  var disqus_shortname = &quot;maringngerrang&quot;;
  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;;

  var disqus_loaded = false;
  function load_disqus() {

    (function() {
   var bloggerjs = document.createElement(&quot;script&quot;);
   bloggerjs.type = &quot;text/javascript&quot;;
   bloggerjs.async = true;
   bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
   (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
    })();
    (function() {
   var bloggerjs = document.createElement(&quot;script&quot;);
   bloggerjs.type = &quot;text/javascript&quot;;
   bloggerjs.async = true;
   bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
   (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
    })();

    disqus_loaded = true;
  };
  window.onscroll = function(e) {
    if ((window.innerHeight + window.scrollY) &gt;= (document.body.offsetHeight - 800)) {
   //hit bottom of page
   if (disqus_loaded==false)
     load_disqus()
     }
  };
   </script></b:if>
  </div>
</b:includable>

Kemudian silakan ganti maringngerrang dengan username akun disqus sobat.

Melengkapi Disqus Load on Scroll di Blogger

Setelah memasang kode diatas tadi, selanjutnya silakan sobat hapus beberapa kode pada blog sobat, yaitu kode untuk komentar default dari blogger. Dengan begitu loading blog sobat bisa sedikit lebih cepat. Silakan hapus kode yang ditandai seperti gambar berikut ini.


Sehingga kodenya menjadi seperti berikut ini :


Setelah itu simpan kode HTML blog sobat dan lihat hasilnya, coba arahkan ke bagian komentar maka disqus baru akan di load. Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.

Sumber : http://www.iwanberbagi.com/2016/06/memasang-komentar-disqus-load-on-scroll.html
Disqus Comment
Parse Tool