Tutorial kali ini bagaimana cara memasang infinite ajax scroll di Blogspot yang membuat halaman pagination blog Anda menjadi autoload ketika di scroll ke bawah. Pada artikel sebelumnya, plugin jQuery infinite ajax scroll ini dapat diterapkan di blog WordPress dan dapat berjalan di beberapa browser dengan versi terbarunya.
Cara pasang skrip infinite ajax scroll di Blogger/Blogspot
1. Buka template editor blog Anda.
2. Centang Expand Template Widget dan sisipkan skrip di bawah ini secara berurutan dalam head template Anda, tepatnya sebelum kode <b:skin>:
File jQuery versi 1.6.1
<b:if cond='data:blog.pageType != "item"'> <!-- File jQuery versi 1.6.1 --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
Infinite Ajax Scroll Setting
<!-- Infinite Ajax Scroll Setting -->
<script type='text/javascript'>
//<![CDATA[
jQuery('document').ready(function($) {
setup_ajax_pagination();
});
function setup_ajax_pagination()
{
jQuery.ias({
container : ".main-inner",
item : ".post-outer",
pagination : ".main-inner .blog-pager",
next : ".blog-pager a.blog-pager-older-link",
history:false,
loader: "<img src='http://url-gambar-loading.tld/loader.gif'/>", //sisipkan url gambar loading, download di sini www.ajaxload.info
});
}
//]]>
</script>
Untuk gambar loader, upload gambar melalui blog Anda, dan sisipkan urlnya pada kode Infinite Ajax Scroll Setting di atas. Ganti kode ini yang ini http://url-gambar-loading.tld/loader.gif dengan url gambar loader Anda.
Skrip jQuery Infinite Ajax Scroll
<!-- Skrip jQuery Infinite Ajax Scroll -->
<script type='text/javascript'>
//<![CDATA[
(function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging(m.scrollContainer);var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();m.scrollContainer.scroll(g)}function g(){if(m.scrollContainer==b.ias.defaults.scrollContainer){scrTop=m.scrollContainer.scrollTop()}else{scrTop=m.scrollContainer.offset().top}wndHeight=m.scrollContainer.height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){m.scrollContainer.unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();m.onRenderComplete.call(this,x);if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){container=b(m.container,y).eq(0);if(0==container.length){container=b(y).filter(m.container).eq(0)}if(container){container.find(m.item).each(function(){v.push(this)})}if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'>"+m.loader+"</div>");loader.hide()}return loader}function o(){loader=u();if(m.customLoaderProc!==false){m.customLoaderProc(loader)}else{el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",scrollContainer:b(window),item:".item",pagination:"#pagination",next:".next",loader:'<img src="images/loader.gif"/>',tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery);
//]]>
</script>
</b:if>
3. Save template Anda.
4. Memposisikan gambar loader.gif pada posisi tengah dengan memasang kode css berikut:
(Baca di sini bagaimana cara mudah menambahkan CSS di template Blogspot):
.ias_loader{
text-align:center;
margin: 5px 0;
}
5. Klik tombol di kanan atas, Terapkan ke Blog (Apply to Blog).Selesai dan lihat hasilnya.
Kode JavaScript Infinite Ajax Scroll di hostingan lain
Apabila Anda mempunyai website hosting atau tempat upload untuk file JavaScript Blogspot, kode JavaScript Infinite Ajax Scroll di atas dapat dipersingkat.
- Melalui notepad atau yang sejenisnya, simpan kode JavaScript Infinite Ajax Scroll Setting berikut dengan nama jquery.ias.setting.js.
jQuery('document').ready(function($) { setup_ajax_pagination(); }); function setup_ajax_pagination() { jQuery.ias({ container : ".main-inner", item : ".post-outer", pagination : ".main-inner .blog-pager", next : ".blog-pager a.blog-pager-older-link", history:false, loader: "<img src='http://url-gambar-loading.tld/loader.gif'/>", }); } - Simpan Skrip jQuery Infinite Ajax Scroll berikut dengan nama jquery.ias.min.js.
(function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging(m.scrollContainer);var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();m.scrollContainer.scroll(g)}function g(){if(m.scrollContainer==b.ias.defaults.scrollContainer){scrTop=m.scrollContainer.scrollTop()}else{scrTop=m.scrollContainer.offset().top}wndHeight=m.scrollContainer.height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){m.scrollContainer.unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();m.onRenderComplete.call(this,x);if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){container=b(m.container,y).eq(0);if(0==container.length){container=b(y).filter(m.container).eq(0)}if(container){container.find(m.item).each(function(){v.push(this)})}if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'>"+m.loader+"</div>");loader.hide()}return loader}function o(){loader=u();if(m.customLoaderProc!==false){m.customLoaderProc(loader)}else{el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",scrollContainer:b(window),item:".item",pagination:"#pagination",next:".next",loader:'<img src="images/loader.gif"/>',tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery); - Upload 2 file .js (jquery.ias.setting.js & jquery.ias.min.js) tersebut di hostingan Anda.
- Sisipkan link upload file tersebut pada kode singkat berikut dan tempatkan di template blog Anda.
<b:if cond='data:blog.pageType != "item"'> <!-- File jQuery versi 1.6.1 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <!-- Infinite Ajax Scroll Setting --> <script type="text/javascript" src="http//url-hosting-lain.tld/jquery.ias.setting.js"></script> <!-- Skrip jQuery Infinite Ajax Scroll --> <script type="text/javascript" src="http//url-hosting-lain.tld/jquery.ias.min.js"></script> </b:if>
Jika pagination blog Anda tidak me-load secara otomatis ketika discroll, Anda perlu mengatur tag id/class pada kode Infinite Ajax Scroll Setting di atas untuk disesuaikan dengan template Anda. (baca di sini untuk mengetahui deskripsi skrip dasar jQuery Infinite Ajax Scroll dan cara settingnya).