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 !=
"static_page"'>
<b:if cond='data:blog.pageType !=
"item"'>
<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>
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.
