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.

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

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


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

<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>

<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>