Infinite Post Scrolling Effect for Default Blogger Templates
O
ne nice thing I like about Blogger’s Dynamic Views is that they remove older posts/newer posts links from your blog and load more posts as you scroll to the end of a page. (This is commonly referred to as infinite scrolling.) Adding infinite scrolling to your Blogger blog with a traditional template is not that hard. you might have seen on bigger sites like facebook and twitter but you can now have this same effect running smoothly right in your blogger blog.So if you are not getting what I am talking about then check out the demo, just scroll down and see older posts loading automatically without clicking an button or pagination number.
Live Demo
Can now be applied to default blogger template currently but soon it will be available for every custom blogger template too
Adding Infinite Scrolling Effect To Default Blogger Template
if you are using default blogger template without any pagination customization or anything then this thing will work for you so check below steps.
- Go to blogger-->Template-->Edit HTML
- CTRL + F to find </head> in your blogs HTML
- Copy and paste below code just above it.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://www.fieg.nl/wp-content/themes/fieg-b/js/jquery.ias.min.js' 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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUfdHfufk7PUuza5ThWFr7xEVuKUJJbr4LA0zJBw-b3RscOXo53uwpsCrhSdn9YenbYR1fD6uRXaHIhDo86Q2g2GWYw8KmryUmBb6lu5adDyqz-EP5GauMQjEPOv7ayjJz6dmQI9P1wv0o/s1600/loading.gif'
});
</script>
<script src='http://www.fieg.nl/wp-content/themes/fieg-b/js/jquery.ias.min.js' 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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUfdHfufk7PUuza5ThWFr7xEVuKUJJbr4LA0zJBw-b3RscOXo53uwpsCrhSdn9YenbYR1fD6uRXaHIhDo86Q2g2GWYw8KmryUmBb6lu5adDyqz-EP5GauMQjEPOv7ayjJz6dmQI9P1wv0o/s1600/loading.gif'
});
</script>
- Now if your blog have already jQuery plugin then remove above red colored line, now just click on Save Template.
- Now check your blog and scroll to bottom and see this awesome effect.
So now you might be able to see that awesome infinite loading effect on your blogger blog, well a very big thanks to SimplexDesign for devoting their hard work in creating this awesome script. Well if you need further guidance on this script do check their post. For any problem do comment below.
No comments