How to Add JQuery Load More Posts Button in Blogger
Innovation is running with rocket's speed and further more innovation is expanding in the world of web that why we can add as much as new highlights in the blog in light of the fact that contributing to a blog is so much adaptable than a site. Along these lines, we can add numerous new and proficient highlights in our blog and same like it "There is a one more component named as LOAD MORE POSTS. Today you will get to realize that how might we add that LOAD MORE POSTS or INFINITE POSTS SCROLLING. This is extremely straightforward and exceptionally simple to introduce yet this impact made by jQuery.
Here I have an Advanced idea for your blog how to add a load more posts button in your blog more established desighn in next posts and numbering yet this is a recent trend of tell more presents the best way on add this in your blog here I give you an idea.Friends now we are going lo learn how to add this into your's blogger blog.
- Login to your blogger account - Create account
- Go to Theme > edit html
- Type Ctrl+f and search <b:defaultmarkups>
- Paste given code after it.
<b:includable id='translate'>
<b:switch var='data:blog.locale.language'>
<b:case value='en'/><b:include name='customLang'/>
<b:default/><b:include name='customLang'/>
</b:switch>
</b:includable>
<b:includable id='customLang'>
<b:switch var='data:message'>
<b:case value='prevPost'/>
<b:if cond='data:blog.locale.language == "en"'>Previous Post<b:else/><data:messages.newer/></b:if>
<b:case value='nextPost'/>
<b:if cond='data:blog.locale.language == "en"'>Next Post<b:else/><data:messages.older/></b:if>
<b:case value='loadMorePosts'/>
<b:if cond='data:blog.locale.language == "en"'>Load More<b:else/><data:messages.loadMorePosts/></b:if>
<b:case value='noMorePosts'/>
<b:if cond='data:blog.locale.language == "en"'>That is All<b:else/><data:messages.noResultsFound/></b:if>
</b:switch>
</b:includable>Now step one has been complete.Friends carefully follow step two because all the steps are very important if you make any kind of mistake this load more posts button will not work correctly.Open blog1 section shown in below image.
and paste the given code after any </b:includable> tag
<b:includable id='indexBlogPager'>
<!-- Post Pagination Index -->
<div class='blog-pager container' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link load-more' expr:data-load='data:olderPageUrl' href='javascript:;' id='load-more-link'>
<svg height='24' viewBox='0 0 24 24' width='24'><path d='M2 12C2 16.97 6.03 21 11 21C13.39 21 15.68 20.06 17.4 18.4L15.9 16.9C14.63 18.25 12.86 19 11 19C4.76 19 1.64 11.46 6.05 7.05C10.46 2.64 18 5.77 18 12H15L19 16H19.1L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z'/></svg><b:include data='{ message: "loadMorePosts" }' name='translate'/></a>
<span class='loading' style='display: none;'>
<svg class='circular' viewBox='25 25 50 50'><circle class='path' cx='50' cy='50' fill='none' r='20' stroke-miterlimit='10' stroke-width='5'/></svg>
</span><span class='no-more load-more'><b:include data='{ message: "noMorePosts" }' name='translate'/></span>
<b:else/>
<span class='no-more load-more show'><b:include data='{ message: "noMorePosts" }' name='translate'/></span>
</b:if>
</div>
</b:includable>
After this find main includable tag and before closing includable tag paste the given code as shown in below
- Add this code where you want to show load more button.
<b:include cond='data:view.isMultipleItems' name='indexBlogPager'/>- Add stylesheet before closing head tag.
<style>#blog-pager{margin:24px 0 0;display:flex;align-items:center;justify-content:center}#blog-pager #load-more-link{display:flex;align-items:center;justify-content:center;background:#1B334B;color:#ffffff;padding:8px 16px;font-size:14px;font-weight:600;width:max-content;border-radius:3px;user-select:none}#blog-pager #load-more-link span:after{display:none;content:''}#blog-pager .loading svg{width:34px;height:34px}#blog-pager .loading,#blog-pager .no-more{display:none}#blog-pager .no-more{font-size:14px;font-weight:600;line-height:1.6;background:rgba(0,0,0,.12);color:var(--color-button);padding:8px 16px;border-radius:3px;user-select:none;cursor:not-allowed}#blog-pager .no-more.show{display:block}#blog-pager .blog-pager-older-link{font-size:16px;padding:0;overflow:hidden;line-height:1.6;width:100%;border:0;background:0 0;color:#000;fill:currentColor;gap:8px}.circular{-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;margin:auto}.path{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:dash 1.5s ease-in-out infinite,color 2s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color 2s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@-webkit-keyframes color{0%,100%{stroke:#ff6060}40%{stroke:#fbaa39}66%{stroke:#2962ff}80%,90%{stroke:#56b856}}@keyframes color{0%,100%{stroke:#ff6060}40%{stroke:#fbaa39}66%{stroke:#2962ff}80%,90%{stroke:#56b856}}.path2{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:dash 1.5s ease-in-out infinite,color2 2s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color2 2s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes color2{0%,100%{stroke:#5f6368}40%{stroke:#5f6368}66%{stroke:#5f6368}80%,90%{stroke:#5f6368}}@keyframes color2{0%,100%{stroke:#5f6368}40%{stroke:#5f6368}66%{stroke:#5f6368}80%,90%{stroke:#5f6368}} </style>- Add this script before closing body tag.
<script>'use strict';
$(function() {
$("#load-more-link").each(function() {
var a = $(this);
var img = a.data("load");
if (img) {
$("#load-more-link")["show"]();
}
$("#load-more-link").on("click", function(event) {
$("#load-more-link")["hide"]();
$.ajax({
url : img,
success : function(doc) {
var nums = $(doc)["find"](".index-post");
nums["find"](".post-outer").addClass("post-animated post-fadeInUp");
$(".index-post").append(nums.html());
img = $(doc)["find"]("#load-more-link").data("load");
if (img) {
$("#load-more-link")["show"]();
} else {
$("#load-more-link")["hide"]();
$(".blog_pager .no-more").addClass("show");
}
},
beforeSend : function() {
$(".blog_pager .loading")["show"]();
},
complete : function() {
$(".blog_pager .loading")["hide"]();
}
});
event.preventDefault();
});
});
});
</script>save your theme everything has been done but if button is not working verify your template have jquery file if not you can copy given file and paste this before closing head tag.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>If still you are facing problem and load more button is not working do these settings right click on any post of your blog and click on inspect.
and copy class of first div tag before article section and replace with .index-post class in upper script and copy class from article tag and replace this with .post-outer class in upper script as i show in below image.
I hope load more posts button will work correctly and if your button is not working correctly do not worry i have an idea for you watch this video tutorial.
If you are new and do not know even the abc about blogging you can join our full blogging course.