Add Infinite Scroll To Blogger
- 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>
Hi Gagan, May i know how to remove this load more effect and add navigation page for visitors guideline....
ReplyDeleteThis is a great tip, thanks! An example of it's implementation can be seen here: PhotoAlmanac.blogspot.com
ReplyDelete