How to Make Unlimited Blog Post Scrolling like Instagram on Blogger

May 08, 2021 1 comment

We can actually find Infinite or Unlimited Scrolling Blog Posts, for example, like Instagram, Facebook, Twitter ... they use Infinite scrolling.

The appearance is very mobile friendly, because visitors just scroll down.

Problem Background and Reasons for using the infinite scroll

So we can scroll pages infinitely by simply scrolling or scrolling the page down. What is clearer is that when you or your blog visitors will browse the blog posts which are usually in the recent post section,

whether it's on the main page or in the post view based on the label and after you and visitors see the first page (which we usually need to press the show the previous post/prev page / next page button) we don't need to click the NextPage button because after reaching the bottom it will automatically load next page post on the first page and after more scrolling down, it will load next page post automatically and so on.

Through this code, we and our visitors will not be too tired to click the "Next" or "Prev" button just to see the rest of the post.

Many others have also posted this and it is generally called 'infinite scrolling' / 'infinite scrolling' / 'unlimited scrolling' in web design.

What about SEO? Does it matter? Don't worry about SEO because it won't take time to load the blog.

Your blogger will also record page views/cache. It will also help to increase visitor time on the main page which is very important in new flow whitehat SEO.

If you are looking for tutorials on how to be able to create a blog template that we make, such as the latest responsive flat blog template trending this time ... because I find this has become a necessity, it seems ... Blog here and there use Infinite Scroll

Yup! Infinite scroll has been a popular trend in web design for some time and now we can make it yourself on our favorite blogger blog. If yesterday the homepage by default the buttons 'Previous' and 'Next' to load a new page from the post. Now on this Blogger, Unlimited Scroll tutorial takes another step by adding Infinite Scroll to the Blogger blog.

Infinite Scroll Feature Explanation

The following are features of the Infinite Scroll script.

1.) JavaScript and JQuery Code.
2.) Jquery 1.9.1 Added.
3.) No External Files Added To Keep Your Load Times Ok.
4.) Jquery is Hosted On The Official CDN Network So Don't Worry About That.
5.) Simple And Clean Code.
6.) Will Scroll Your Posts To Infinite Automatically.
7.) Your Page Views Will Be Counted On Blogger.
8.) Will Stop Auto Scrolling Once It Reaches Your Desired Page.
9.) A Button Will Appear To Load More Posts After Stopping Auto Scrolling.
10.) Automatic Scroll Stop Added To Increase Your Clicks And To Show Your Footer To Your Visitors.
11.) Fully Customizable CSS.
12.) You Can Change The Loading Text And Image.
13.) More Features Also Added In This Script.
14.) Will Work On Automatic ReadMore And Thumbnail Codes Also.
15.) Adopted Blogger Dynamic Template Style.
16.) SEO Optimized.
17.) Quick To Load And Easy To Install.
18.) Will Not Affect Your Pages Loading Text / Images.
19.) Will Not Work On Posting Pages. Will Show Unlimited Posts Only HomePage, LabelPage, SearchPage.
20.) Automatically Hide Next / Previous Links On This Page.

How to add unlimited blog scrolling scripts like Instagram on blogger

1.) Go to www.blogger.com
2.) Please go to Edit HTML, tutorial How to Edit HTML
3.) Now Click Inside Code Box.
4.) Press [CTRL + F] To Search </body>.
7.) Now Copy The Code Below And Paste Before The Code </body> ..
8.) Click "Save Template" And Finish.

Here's the Infinite Scroll Code ..



 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<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/AVvXsEjpSzK4DHP3H1qxDT2YDWnaf-j7fl-_8dDbcXZyLDDcNK9Nf9p5C7DzZv6IDmB8q98SJ2ZK1WVlC7coL7ZfkuPVDxKJA_O483gf0uu5BCH1LjMGRnQSKmJgilHSgczL1xXE3jKsd899zJM/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>

In the .ias_trigger a {padding: 10px; color: #fff; background: # 1a1a1a; font-weight: bold; text-transform: uppercase;}, precisely on background # 1a1a1a, it's a rather faint black color, so if you want change the color .. please change the color code.

#fff, is the color of the text ... please change it as you wish if you want to change it ...

If you want the Demo Script ...

The rest is like the screenshot above.

Infinite Scroll v2 [LOAD MORE] Blogger

If this version is a bit complicated, it is different from the script above, which just sticks it at the top of the cover </body>

1. Jump to Edit HTML, please search

<b:includable id='nextprev'>

, if on the RahmanCyber v1 Blog template, the location is here

Please delete and replace it from

<b:includable id='nextprev'>

up to the closing tag </b:includable>

Please replace it with this code



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

yes, after that .. continue

2. Please install the auto load more in script above </body> ( remember, if you installed the unlimited post script above, please delete the script first ... because it could possibly clash. )

if it's deleted, then you put this script right above

</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. If we have added the CSS Style to make it look more attractive, please copy and paste the code below right above ]]></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}

After everything is installed, next is that you save your template and please run it.

Closing Discussion Unlimited Scroll Flat Responsive

Infinite Scoll is actually intended to attract visitors who currently have an abundance of visitors in the mobile version .. I don't know ..

people prefer to browse using smartphones ..

Is it because it's easy .. Easy to carry anywhere?

So many tutorials to make Unlimited Scroll Posts like Instagram on Blogspot this time ...

Hopefully there are benefits, If Share .. include the source.

MyShorTTips

MyShortTips

Widget Atas Posting