Introduction
For non-coders if you're wondering what AJAX is, AJAX is short for Asynchronous JavaScript and XML, this is an important front-end web technology that lets JavaScript communicate with a web server. It lets your visitors load new contents without leaving the homepage. It has tons of uses but in this tutorial we will just tackle on how you could add a simple load more posts button on your own blogger blogspot. In order to do so, you just need to follow these steps!Note: Jquery Library is needed as this runs with AJAX.
Live Demo
DemoChoosing your Spinner
Go to Loading.ioLogin using your Google Account or Facebook Account
Select a Free Spinner/Loader
Customize the spinner to adapt your theme's design
Once you're done, hit the CSS button under the Download
Click on Free Download
Then select all the text inside the Spinner.Html that will popup to your screen
And finally, Copy the text (ctrl+c)
Adding the Spinner
Go to Blogger » Template » Backup your Template » and Edit HTMLSearch and Look for (ctrl+f) <b:include name='nextprev'/>
Note: This tag might have multiple occurrences (Find the one with parent the <b:if cond='data:blog.pageType != "item"'>)
Paste the code you have copied earlier before <b:if cond='data:blog.pageType != "item"'>
JScript
Find (ctrl+f) </body> Copy and Paste the following JScript before it<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/javascript'>
var spinner = $('.lds-css');
spinner.wrap("<div class='loadMore'><div id='loader' style='display: none'></div></div>");
spinner.parents('.loadMore').prepend("<div class='loadMorePosts'><a class='loadMoreButton' href='#'>Load More Posts</a></div><div class='noMorePosts' style='display: none'><span>No More Posts to Load</span></div>");
$('#blog-pager').hide();
var olderLink = $('a.blog-pager-older-link').attr("href");
if(olderLink)
$('.loadMorePosts').show();
$('.loadMorePosts a').on('click', function(e){
$('.loadMorePosts').hide();
$.ajax({
url: olderLink,
success: function(html){
var res = $(html).find('.blog-posts');
res.children(".status-msg-wrap").remove();
$('.blog-posts').append(res.html());
olderLink = $(html).find('.blog-pager-older-link').attr("href");
if (olderLink)
$('.loadMorePosts').show();
else $('.noMorePosts').show();
},
beforeSend: function() {
$('.loadMore > #loader').show();
},
complete: function(){
$('.loadMore > #loader').hide();
},
});
e.preventDefault();
});
</script>
</b:if>
0 Comments