Cara Menampilkan Disqus Comment Hanya Ketika Laman di Scroll (Gulir)

Cara Menampilkan Disqus Comment Hanya Ketika Laman di Scroll (Gulir)

Cara Menampilkan Disqus Comment Hanya Ketika Laman di Scroll (Gulir)

Cara Menampilkan Disqus Comment Hanya Ketika Laman di Scroll (Gulir). Seperti toturial saya sebelumnya, Membuat Tombol Show and Hide Disqus Comment diblog, dengan tombol tersebut sobat dapat dengan mudah menampilkan dan menyembunyian disqus comment dari blog sobat.

Membuat komentar Disqus tampil hanya ketika pada saat laman kita di scroll kebawah adalah salah satu cara memodifikasi tampilan Disqus Comment sobat apalagi jika sobat menyukai desain blog yang responsif.

Pada artikel kali ini saya akan membagikan satu trik lagi untuk menampilkan Disqus Comment di blog sobat hanya ketika pengunjung menscroll laman web atau blog sobat ke bawah, jadi dengan kata lain Diqsqus Comment tidak akan muncul jika pengunjung belum menscroll laman blog sobat kebawah. Uniknya lagi jika saat discroll Disqus Comment tidak muncul maka, secara otomatis Tombol Show Disqus akan tampil untuk bisa anda klik. mantap ga sob...



Hal ini akan membantu mengurangi waktu loading halaman dan juga membatasi jumlah data yang terdownload ketika mengakses blog kita. Jadi, pengunjung yang tidak pernah menscroll ke bawah maka Disqus Comment tidak akan pernah muncul atau tampil.
Cara Menampilkan Disqus Comment Hanya Ketika Laman di Scroll (Gulir)
Catatan, karena ada yang menanyakan apakah script ini bisa tampil di versi mobile? jawab nya bisa, silahkan sobat lihat demonya disini lalu scroll laman tersebut kebawah .(buka menggunakan Smartphone sobat)


Langkah-langkah Menampilkan  Disqus Comment  Hanya Ketika Laman Blog di Scroll.

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML
Langkah-2 : Simpan kode script di bawah ini, tepat sebelum tag </head> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Langkah-3 : Temukan Kode  <b:includable id='comments' var='post'>
Kemudian ganti semua kode dibawahnya dengan kode berikut.

<button type="button" id="btnDisqusLoadComments" >Load Disqus Comments</button>

<div id="disqus_thread" data-disqus-shortname="DISQUS-USERNAME"></div>

Sehingga akan menjadi seperti ini dibawah ini:

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

<button type="button" id="btnDisqusLoadComments" >Load Disqus Comments</button>
<div id="disqus_thread" data-disqus-shortname="DISQUS-USERNAME"></div>
</b:includable>

Langkah-4 : Letakan kode berikut tepat sebelum kode </body> .

<script>

//<![CDATA[
/*AM22 Named Function to load Disqus - START*/
var disqus_identifier = window.location.url; //Use current page URL as Disqus_URL_Identifier. You can change it as per your requirement.
var ds_loaded = false; //To track loading only once on a page.
function loadDisqus()
{
var disqus_div = $("#disqus_thread"); //The ID of the Disqus DIV tag
var top = disqus_div.offset().top;
var disqus_data = disqus_div.data();
if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top )
{
ds_loaded = true;
for (var key in disqus_data)
{
if (key.substr(0,6) == 'disqus')
{
window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
}
}
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}
/*Disqus is not loaded - Show the button to load*/
if (ds_loaded)
{
$("#btnDisqusLoadComments").hide();
}
else
{
$("#btnDisqusLoadComments").show();
}
}
$(function ()
{
var disqus_div = $("#disqus_thread");
if (disqus_div.size() > 0)
{
$(window).scroll(loadDisqus);
}
}
);
$(function () {
$("#btnDisqusLoadComments").click(loadDisqus);
});
/*AM22- Load Disqus comments on click of button - END*/
//]]>
</script>

CATATAN:
Silahkan ganti DISQUS-USERNAME dengan nama Disqus Username Sobat sendiri

Langkah-5: Simpan template sobat dan Selesai.

Demikianlah Tutorial mengenai Cara Menampilkan Disqus Comment Hanya Ketika Laman di Scroll (Gulir), semoga ada manfaatnya ya, dan saya sangat senang Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×