easily create a professional website(part-7)How to add Infinite Scrolling to Blogger

ads

Welcome to bd tips tehc.today will show how to add your blog Infinite Scrolling.Instead of showing Older / Newer posts links, we can load posts dynamically.This tutorial will show you how to implement Ajax based loading script that will add Infinite Scrolling to Blogger.

 

How to add Infinite Scrolling to Blogger

keyword:how to add Infinite Scrolling,add blogger Infinite Scrolling post,add blogger Infinite Scrolling,how add blogger Infinite Scrolling,add blogger Infinite Scrolling,বল্গে যুক্ত লোড মোর ইফেক্ট,কিভাবে বল্গে সি মোর ইফেক্ট যুক্ত করবেন,বল্গে লোড মোর পোস্ট যুক্ত করার উপায়

Adding Infinite Scrolling to Blogger

Log into your Blogger account and click on your blog where you want to add it.

Go to 'Template' and click the 'Edit HTML' button to open the Template editor > click anywhere in the code area and press CTRL + F keys (or Command + F) to open the search box

Type the tag below in the search box and press ENTER to find it:

</head>

Just above the </head> tag, add the following scripts/css styles:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();150>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);

//]]>

</script>

</b:if></b:if>

 Get code

Note: This code uses jQuery library, so if you already have jQuery on your page, please remove the line in red highlighted above.

 Click 'Save template' button and check the  Infinite Scrolling in your Blogger blog.