You might be interested in
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.
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...
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 menuTemplate
> Edit HTML
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.
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!
Tambah keren mas :) makin kreatif :)
BalasHapusNamun jadi tetap berat loadingnya mas, menghindari loading dari komentar Disqus iya, tapi juga menambah beban loading lagi oleh jquery library (blocking render js)
iya kang... ada solusi untuk mengatasinya kang?
BalasHapusseumpama di buat async.. gimana menurut kang Adhy?
BalasHapusAsynchronous untuk jquery untuk saat ini masih tidak bisa.
BalasHapusHarus mencoba load dengan scroll dengan javascript
BalasHapusnah ini Kang Adhy masternya, saya tunggu versi javascriptnya dari kang Adhy... hehehe
BalasHapusMas cara bikin kaya gini gmn?
BalasHapusfikazha...coba intip SC blog ini, perhatikan satu persatu, saya yakin anda pasti bisa memasangnya di blog kesayangannya... :)
BalasHapusbingung gan, tolong dibuatin tutornya dong...
BalasHapusmksh
sebenarnya jika agan mengikuti langkah2 diatas, saya jamin akan terpasang di blog agan dengan sempurna... :)
BalasHapusmksdnya tutor comment dsqus,blogger,fb
BalasHapusBaca tutornya disini sudah saya buatkan mas.... http://www.antoncabon.us/2016/03/cara-mudah-membuat-multi-tabs-kolom-komentar.html
BalasHapusBaca disini tutornya mas, semoga berhasil... http://www.antoncabon.us/2016/03/cara-mudah-membuat-multi-tabs-kolom-komentar.html
BalasHapus