Today you will get to know that how can we add that LOAD MORE POSTS or INFINITE POSTS SCROLLING. This is very simple and very easy to install but this effect made by jQuery.
Infinite scrolling allows the user to view the next set of posts in a blog site simply by scrolling down near the bottom of the page instead of clicking on a ‘Next’ button. Why not try it out on your own site and see if your visitors would appreciate it as well?
Here’s how you can install it:
Add Load More in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML
- Press Ctrl + F and search the code shown below.
In your Blogger dashboard, go to Template and then click on Edit HTML.
If you’re using latest jQuery script you can remove the jQuery code from above code highlighted in red. You should download and upload these files in your own Dropbox or Google Project or Code which are highlighted in green and orange color.
Save this script/code in your template
Infinite scrolling allows the user to view the next set of posts in a blog site simply by scrolling down near the bottom of the page instead of clicking on a ‘Next’ button. Why not try it out on your own site and see if your visitors would appreciate it as well?
Here’s how you can install it:
(NOTE: This only works for Blogger’s default templates)
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML
- Press Ctrl + F and search the code shown below.
In your Blogger dashboard, go to Template and then click on Edit HTML.
Using Ctrl+F, search for the </head> tag and copy/paste the code below right above it.
<b:if cond=’data:blog.pageType == “index”‘>
<script src=’//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’/>
<script src=’https://googledrive.com/host/0Bxsq9VDr3zyFMjNlYjhNeWlza1U’ type=’text/javascript’/>
<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/AVvXsEhGjCY0W8CBeH3TNqRtTTu1juEboxn1WKkazoyrRKxiLUvo99lAa_Dc27BnLvhVQG3WNwHRzaKeO6gEu2c4KuZ5LG-6A50NHhbxtxEY1NAeASngaEf_xfBxrXKa_oe0krGcAkark153Ob97/s1600/wgloading.gif’
});
</script>
</b:if>
If you’re using latest jQuery script you can remove the jQuery code from above code highlighted in red. You should download and upload these files in your own Dropbox or Google Project or Code which are highlighted in green and orange color.
Save this script/code in your template