RahmanCyber.NET | Blogger - Infinite atau Unlimited Scrolling Postingan Blog sebenarnya bisa kita temukan contohnya seperti Instagram, Facebook, Twitter.. mereka memakai Infinite scrolling.
{getToc} $title={Table of Contents}
Tampilannya sangat mobile friendly, karena pengunjung cuman lakukan gulir ke bawah aja.
Latar Belakang dan Alasan
Jadi kita dapat menggulir halaman tanpa batas hanya dengan menggulir atau
scrolling halaman ke bawah. Lebih jelasnya adalah ketika kalian atau
pengunjung blog kalian akan menelusuri postingan blog yang biasanya di bagian
recent post, entah itu di halaman utama maupun di tampilan post berdasarkan
label dan setelah kalian maupun pengunjung melihat halaman pertama ( yang
biasanya kita perlu tekan tombol tampilkan post sebelumnya / prev page / next
page), menjadi kita tidak perlu mengklik tombol NextPage karena setelah
mencapai bawah, secara otomatis akan memuat posting halaman berikutnya di
halaman pertama dan setelah menggulir lebih banyak ke bawah, itu akan dimuat
posting halaman berikutnya secara otomatis dan seterusnya.
Melalui
kode ini kita maupun pengunjung tidak akan terlalu lelah untuk mengklik tombol
"Next" atau "Prev" hanya untuk melihat sisa posting.
Banyak orang lain juga memposting ini dan umumnya disebut 'pengguliran tak terbatas' / 'Infinite Scrolling' / 'unlimited scrolling' dalam desain web.
Bagaimana dengan SEO? Apakah berpengaruh? Jangan khawatir tentang SEO karena tidak akan memakan waktu muat blog.
Blogger kalian juga akan merekam tampilan halaman / cache. Ini juga akan membantu untuk meningkatkan waktu pengunjung di halaman utama yang sangat penting dalam SEO aliran putih atau whitehat baru.
Jika kalian muter muter mencari tutorial bagaimana cara agar bisa
membuat template blog yang kita buat, seperti template template blog flat
responsive yang terbaru trending kali ini... karena memang saya dapati hal ini
sudah menjadi sebuah keharusan sepertinya... Blog sana dan sini pakai Infinite
Scroll
Yup! Infinite scroll sudah menjadi trend populer dalam desain web selama beberapa waktu dan sekarang kita bisa membuatnya sendiri di blog blogger kesayangan kita. Kalo kemaren beranda secara default tombol 'Sebelumnya' dan 'Berikutnya' untuk memuat halaman baru dari posting. Sekarang pada tutorial Blogger Unlimited Scroll ini mengambil langkah lain dengan menambahkan Gulir Tak Terbatas ke blog Blogger.
Penjelasan Fitur Infinite Scroll
Berikut ini adalah fitur dari script Infinite Scroll..
1.) JavaScript dan Kode JQuery.
2.) Jquery 1.9.1 Ditambahkan.
3.)
Tidak Ada File Eksternal Ditambahkan Untuk Menjaga Waktu Muat Anda Ok.
4.)
Jquery Diinangi Di Jaringan CDN Resmi Jadi Jangan Khawatir Tentang Itu.
5.)
Kode Sederhana Dan Bersih.
6.) Akan Menggulir Posting Anda Ke Tak
Terbatas Secara Otomatis.
7.) Tampilan Halaman Anda Akan Dihitung Di
Blogger.
8.) Akan Berhenti Menggulir Otomatis Setelah Mencapai Halaman
Yang Anda Inginkan.
9.) Sebuah Tombol Akan Muncul Untuk Memuat Lebih
Banyak Posting Setelah Menghentikan Pengguliran Otomatis.
10.)
Penghentian Gulir Otomatis Ditambahkan Untuk Meningkatkan Jumlah Klik Anda Dan
Untuk Menampilkan Footer Anda Kepada Pengunjung Anda.
11.) CSS yang Dapat
Disesuaikan Sepenuhnya.
12.) Anda Dapat Mengubah Teks Dan Gambar
Memuat.
13.) Lebih Banyak Fitur Juga Ditambahkan Dalam Skrip Ini.
14.)
Akan Bekerja Pada ReadMore Otomatis Dan Kode Thumbnail Juga.
15.)
Diadopsi Gaya Template Dinamis Blogger.
16.) SEO Dioptimalkan.
17.)
Cepat Untuk Memuat Dan Mudah Untuk Menginstal.
18.) Tidak Akan Berefek
Pada Halaman Anda Memuat Teks / Gambar.
19.) Tidak Akan Bekerja Pada
Halaman Posting. Akan Menampilkan Posting Tidak Terbatas Hanya HomePage,
LabelPage, SearchPage.
20.) Secara Otomatis Sembunyikan Tautan Berikutnya
/ Sebelumnya Di Halaman Ini.
Cara Menambahkan Script Unlimited Scrolling Blog Seperti Instagram di Blogger
1.) Buka www.blogger.com
2.) Silahkan masuk ke Edit HTML, tutorial
Cara Menuju Edit HTML
3.) Sekarang Klik Di Dalam Kotak Kode.
4.) Tekan [CTRL + F] Untuk
Mencari </body>.
7.) Sekarang Salin Kode Di Bawah Ini Dan Tempelkan
Sebelum Kode </body> ..
8.) Klik "Simpan Template" Dan Selesai.
Berikut Kode Infinite Scroll nya..
<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
(function($){'use strict';Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$('html, body').scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind('scroll',scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr('href');if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr('href');$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},'html')}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$('html,body').animate({'scrollTop':b},400,'swing')}else{$('html,body').animate({'scrollTop':b},1000,'swing');reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$('.ias_loader');if(a.size()===0){a=$('<div class="ias_loader">'+h.loader+'</div>');a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$('.ias_trigger');if(b.size()===0){b=$('<center><div class="ias_trigger"><a href="#">'+h.trigger+'</a></div></center>');b.hide()}$('a',b).off('click').on('click',function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:'.blog-posts',scrollContainer:$(window),item:'.post-outer',pagination:'#blog-pager',next:'#blog-pager-older-link a',loader:'<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7IoQvB8BuvIWo4v0vFaNK4htBCkpPZ-hbY5iltsl50fyWSvU-3rnXPf2KStS6WGODqbupSnodq9Xy0p_zwRGbpR_Sw8tYZeiIRittM9d-EVeVPCxJV_0C6nfSqAzNpK-72pZ4xr2sD8/s400/rahmancyber-net-progress-bar.gif"/></center>',loaderDelay:2000,triggerPageThreshold:2,trigger:'Load More Posts',thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push(['_trackPageview']); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$('html,body').scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i--){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i--){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},'',b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)==='#/page/');if(a){pageNum=parseInt(window.location.hash.replace('#/page/',''),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?'#/page/'+a.page:'');window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script>
<script>jQuery.ias();</script>
<style>
.ias_trigger {margin-bottom: 25px;margin-top: 25px;}
.ias_trigger a{padding: 10px;color: #fff;background: #1a1a1a;font-weight: bold;text-transform: uppercase;}
</style>
</b:if>
Pada bagian .ias_trigger a{padding: 10px;color: #fff;background: #1a1a1a;font-weight: bold;text-transform: uppercase;} , tepatnya di background #1a1a1a, itu adalah warna hitam agak samar, jadi jika ingin mengganti warna.. silahkan ganti kode color tersebut.
#fff, merupakan warna teksnya.. silahkan ganti sesuai keinginan jika mau ganti..
Jika kalian menginginkan Demo Scriptnya...
Kalian bisa melihatnya di RahmanCyber.NET, karena itu yang kita pakai di blog kita ini.. "Kalo belum ganti"
Selebihnya seperti gambar screenshot diatas.
Infinite Scroll v2 [LOAD MORE] Blogger
Kalo yang versi ini agak ribet beda dengan script diatas yang tinggal tempel di bagian atas penutup </body>
1. Langsung ke Edit HTML, silahkan cari
<b:includable id='nextprev'>, kalo di template Blog RahmanCyber v1, ada disini letakknya
<b:includable id='nextprev'>sampai tag penutup </b:includable>
Silahkan kalian ganti dengan kode ini
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
Load More
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
ya, setelah itu.. lanjut
2. Silahkan pasang scipt autoload more ini diatas </body> ( ingat, kalau kalian memasang script unlimited post diatas, silahkan hapus dulu scriptnya.. karena bisa bentrok kemungkinan.
</body>
<script>
//<![CDATA[
/*infinite scroll*/
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function f(){return L.innerHTML=p.text.loading,T=!0,y?(M.classList.add(p.state.loading),l("loading",[p]),void u(y,function(t,n){M.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+j+'"></span>'),h=e.createElement("div");for(var f=0,u=a.length;u>f;++f)h.appendChild(a[f]);d.insertAdjacentHTML("afterend",h.innerHTML),c(),y=i.length?i[0].href:!1,T=!1,j++,l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error),T=!1,c(1),l("error",[p,t,e])})):(M.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function c(t){if(L.innerHTML="",v){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(v=!1),f(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),c();var A=function(){E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=m.scrollTop||M.scrollTop,T||E>w+b||f()};A(),0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,500))},!1)}return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
type: 0,
target: {
posts: '.blog-posts',
post: '.date-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" href="javascript:;">Muat Lagi</a>',
loading: '<span class="js-loading" style="cursor:wait;">Memuat\u2026</span>',
loaded: '<span class="js-loaded">Dimuat.</span>',
error: '<a class="js-error" href="javascript:;">Kesalahan.</a>'
}
});
//]]>
</script>
3. Kalo sudah kita tambahkan CSS Stylenya agar tampilannya lebih menarik.. , silahkan copy paste code dibawah ini tepat diatas ]]></b:skin>
/* Infinite Scroll Navigation */
#blog-pager a.home-link {display:none}
#blog-pager {padding:0;margin:20px auto; text-align:center;}
#blog-pager-older-link {float:none; display:block}
#blog-pager-older-link img {max-height:50px}
#blog-pager-older-link a {background:#008c5f; color:#fff; font-size:14px; font-weight:600; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s}
#blog-pager-older-link a:hover {background:#ed4044}
Setelah terpasang semuanya, selanjutnya adalah kamu save template milikmu dan silahkan jalankan.
Penutup Bahasan Unlimited Scroll Flat Responsive
Infinite Scoll ini sebenarnya untuk menarik pengunjung yang saat ini memang sudah membludak pengunjung versi mobile.. entahlah..
orang orang jadi lebih suka browsing pakai smartphone..
Apakah karena Enteng.. Mudah dibawa kemana mana?
Sekian Tutorial membuat Gulir Postingan Tak Terbatas seperti Instagram di Blogspot kali ini..
Moga ada manfaatnya, Jika Share.. sertakan sumbernya.
F.N.A-RED