INFINITE SCROLL FOR BLOGGER: Traditionally, the user would have to click on next page or previous page to visit older post content. However, recently there is a new trend started by popular sites (such as facebook and twitter) in which they automatically load the next page content once the user hits the bottom of the post. This technique has proven to show an increase in time spent on page by the user because the new content loads automatically.
Here, I will explain you two types of INFINITE SCROLL.
1.OnClick Infinite Scroll: When user will click on MORE POSTS more posts will be shown.
2.Auto Infinite scroll: After reaching last post automatically older posts will be added.
How To Add To Your Blogger:-
1.Go to your BLOGGER DASHBOARD > Click On Layout.
2.Add gadget(Anywhere)
3.Select HTML/Javascript Gadget.
4.Keep the TITLE empty and paste the following code in CONTENT TEXTBOX.
5.Save, Its done.
How To Add To Your Blogger:-
1.Go to your BLOGGER DASHBOARD > Click On Theme.
2.Click on Edit HTML.
3.Search for </head> code.
4.Paste the code given below.
5.Save Theme, Its done.
Here, I will explain you two types of INFINITE SCROLL.
1.OnClick Infinite Scroll: When user will click on MORE POSTS more posts will be shown.
2.Auto Infinite scroll: After reaching last post automatically older posts will be added.
1.OnClick Infinite Scroll
How To Add To Your Blogger:-
1.Go to your BLOGGER DASHBOARD > Click On Layout.
2.Add gadget(Anywhere)
3.Select HTML/Javascript Gadget.
4.Keep the TITLE empty and paste the following code in CONTENT TEXTBOX.
5.Save, Its done.
<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</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/horizontal-loader-black.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<!-- infinite scroll style by www.techirsh.com -->
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#f00000;}
.techirshloader{
border:1px solid #96f0ff;-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; font-weight:bold; text-align: center; color: #000000; background-color: #cef8ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cef8ff), to(#7fe0f8));
background-image: -webkit-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -moz-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -ms-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -o-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: linear-gradient(to bottom, #cef8ff, #7fe0f8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cef8ff, endColorstr=#7fe0f8);
}
.techirshloader:hover{
border:1px solid #68e9ff; background-color: #9bf1ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9bf1ff), top(#4fd4f5));
background-image: -webkit-linear-gradient(top, #9bf1ff, #4fd4f5);
background-image: -moz-linear-gradient(top, #9bf1ff, #4fd4f5);
background-image: -ms-linear-gradient(top, #9bf1ff, #4fd4f5);
background-image: -o-linear-gradient(top, #9bf1ff, #4fd4f5);
background-image: linear-gradient(to bottom, #9bf1ff, #4fd4f5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#9bf1ff, endColorstr=#4fd4f5);
}
</style>
2. Auto Infinite Scroll
How To Add To Your Blogger:-
1.Go to your BLOGGER DASHBOARD > Click On Theme.
2.Click on Edit HTML.
3.Search for </head> code.
4.Paste the code given below.
5.Save Theme, Its done.
<b:if cond='data:blog.pageType == "index"'> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <script src='' type='text/javascript'></script> <script type='text/javascript'> jQuery.ias({ container : '.blog-posts', item: '.post-outer', pagination: '#blog-pager', next: '#blog-pager-older-link a', loader: '' }); </script> </b:if>
