Tuesday, September 17, 2013

Infinite Scrolling Load More Post For Blogger Blogs

Author: Gagan Masoun
Infinite Scrolling Load More Post
Now, you can add an infinite scrolling effect in blogger blogs easily. Make your blog's homepage more professional and beautiful with an infinite scroll. When users will land on the homepage, they will see the some posts, as they scrolls down then automatically more posts load with amazing style. Popular sites like Facebook, Twitter, Google+ and many other sites use the same effect. I have the demo and a quick guide for you to add it to your blog in seconds. Just follow the below given tips to get it in your blogspot blog.

Add Infinite Scroll To Blogger

Select your desired style from list of Styles defined below and copy the code.
  • Go to Blogger Dashboard >> Layout >> Click Add a Gadget 
  • Select HTML/JavaScript >> Paste The Copied Code In This Gadget and Save.

Style 1

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);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();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<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 c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://www.google.co.in/images/loading.gif" style="display: none;">');f.scroll(k);b=a('<div class="blogsdaddyloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.blogsdaddy.com -->
<style>
.blogsdaddyloader {text-align: center; font-size: 100%; padding:10px;color:#FFFFFF;width:95%;
background:-webkit-gradient(linear, 0% 0%, 0% 54%, from(#F8F8F8), to(#F1F1F1));
border: 2px solid #c6c6c6;border-radius:2px;}
.blogsdaddyloader a{text-decoration:none;display:block;width:100%;color:#000000;}
</style>

Style 2

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);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();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<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 c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OFs86VZmQamlHO1yNnYxY9xgCKkjZkjP-eUdXn94Vw-O4pXr8EyUMOmoh6pjRMvVXAV-VOjgLOkdwZkV7jup_XVdSU1T8bSLmjBnit6Yh3SoBlISEzOFi0MJj_sPKf0J3tvMqvf4Kwpj/s1600/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="blogsdaddyloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.BlogsDaddy.com -->
<style>
.blogsdaddyloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.blogsdaddyloader{
border:1px solid #7d99ca;-webkit-box-shadow: #B4B5B5 1px 1px 1px  ;-moz-box-shadow: #B4B5B5 1px 1px 1px ; box-shadow: #B4B5B5 1px 1px 1px  ; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a5b8da;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
 background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
 background-image: linear-gradient(to bottom, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);
}
.blogsdaddyloader:hover{
 border:1px solid #5d7fbc; background-color: #819bcb;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#819bcb), top(#536f9d));
 background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
 background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
 background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
 background-image: -o-linear-gradient(top, #819bcb, #536f9d);
 background-image: linear-gradient(to bottom, #819bcb, #536f9d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#819bcb, endColorstr=#536f9d);
}
</style>

Style 3

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);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();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<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 c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OFs86VZmQamlHO1yNnYxY9xgCKkjZkjP-eUdXn94Vw-O4pXr8EyUMOmoh6pjRMvVXAV-VOjgLOkdwZkV7jup_XVdSU1T8bSLmjBnit6Yh3SoBlISEzOFi0MJj_sPKf0J3tvMqvf4Kwpj/s1600/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="blogsdaddyloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.blogsdaddy.com -->
<style>
.blogsdaddyloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.blogsdaddyloader{
border:1px solid #616261;-webkit-box-shadow: #B4B5B5 1px 1px 1px  ;-moz-box-shadow: #B4B5B5 1px 1px 1px ; box-shadow: #B4B5B5 1px 1px 1px  ; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #7d7e7d;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7e7d), to(#0e0e0e));
 background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: linear-gradient(to bottom, #7d7e7d, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);
}
.blogsdaddyloader:hover{
 border:1px solid #4a4b4a; background-color: #646464;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#646464), top(#282828));
 background-image: -webkit-linear-gradient(top, #646464, #282828);
 background-image: -moz-linear-gradient(top, #646464, #282828);
 background-image: -ms-linear-gradient(top, #646464, #282828);
 background-image: -o-linear-gradient(top, #646464, #282828);
 background-image: linear-gradient(to bottom, #646464, #282828);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#646464, endColorstr=#282828);
}
</style>

Style 4

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);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();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<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 c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OFs86VZmQamlHO1yNnYxY9xgCKkjZkjP-eUdXn94Vw-O4pXr8EyUMOmoh6pjRMvVXAV-VOjgLOkdwZkV7jup_XVdSU1T8bSLmjBnit6Yh3SoBlISEzOFi0MJj_sPKf0J3tvMqvf4Kwpj/s1600/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="blogsdaddyloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.blogsdaddy.com -->
<style>
.blogsdaddyloader a{text-decoration:none;display:block;width:100%;color:#3772AB;}
.blogsdaddyloader{border:2px solid #3772AB;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; font-weight:bold; text-align: center; color: #3772AB;}
.blogsdaddyloader a:hover{color: #000000;}
</style>

Style 5

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);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();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<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 c=
a('<a href="javascript:;" >Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OFs86VZmQamlHO1yNnYxY9xgCKkjZkjP-eUdXn94Vw-O4pXr8EyUMOmoh6pjRMvVXAV-VOjgLOkdwZkV7jup_XVdSU1T8bSLmjBnit6Yh3SoBlISEzOFi0MJj_sPKf0J3tvMqvf4Kwpj/s1600/horizontal-loader-white.gif" style="display: none;">');f.scroll(k);b=a('<div class="blogsdaddyloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.blogsdaddy.com -->
<style>
.blogsdaddyloader a{text-decoration:none;display:block;width:100%;color:#FFFFFF;}
.blogsdaddyloader{
border:1px solid #df0909;-webkit-box-shadow: #B4B5B5 1px 1px 1px  ;-moz-box-shadow: #B4B5B5 1px 1px 1px ; box-shadow: #B4B5B5 1px 1px 1px  ; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #f62b2b;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#f62b2b), to(#d20202));
 background-image: -webkit-linear-gradient(top, #f62b2b, #d20202);
 background-image: -moz-linear-gradient(top, #f62b2b, #d20202);
 background-image: -ms-linear-gradient(top, #f62b2b, #d20202);
 background-image: -o-linear-gradient(top, #f62b2b, #d20202);
 background-image: linear-gradient(to bottom, #f62b2b, #d20202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f62b2b, endColorstr=#d20202);
}
.blogsdaddyloader:hover{
 border:1px solid #b30808; background-color: #e40a0a;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#e40a0a), top(#9f0202));
 background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
 background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
 background-image: -ms-linear-gradient(top, #e40a0a, #9f0202);
 background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
 background-image: linear-gradient(to bottom, #e40a0a, #9f0202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#9f0202);
}
</style>
And that's it, really easy. Check out your blog with infinite scroll. Drop your comments and questions below.

2 comments:

  1. Hi Gagan, May i know how to remove this load more effect and add navigation page for visitors guideline....

    ReplyDelete
  2. This is a great tip, thanks! An example of it's implementation can be seen here: PhotoAlmanac.blogspot.com

    ReplyDelete