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

Post by: antoncabon with

of Coffee.

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.

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)

DEMO

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!

Posted in category:

Blogger Button Disqus Triks Tutorial