Welcome to bd tips tehc.today will show how to add your blog
load more post.Instead of showing Older / Newer posts links, we can load posts
dynamically whenever a "Load more posts" button is clicked.This tutorial
will show you how to implement Ajax based loading script that will add Load
More Posts to Blogger.
Adding Load More
Posts to Blogger
Log into your Blogger account and click on your blog where
you want to add it.
Go to 'Template' and click the 'Edit HTML' button to open
the Template editor > click anywhere in the code area and press CTRL + F
keys (or Command + F) to open the search box
Type the tag below in the search box and press ENTER to find
it:
</head>
Just above the </head> tag, add the following
scripts/css styles:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
<b:if cond='data:blog.pageType !=
"static_page"'>
<b:if cond='data:blog.pageType !=
"item"'>
<script type='text/javascript'>
//<![CDATA[
!function(a){function
b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var
b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),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();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function
c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();0>a-c&&b()}var
d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<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
g=a('<a href="javascript:;" >LOAD MORE
POSTS</a>');g.click(b);i.scroll(c);f=a('<div
class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);//]]>
</script>
<style type="text/css">
.load-more{display:block;text-align:center;margin:20px
auto;}.load-more a,.load-more a:hover{text-decoration:none;font:bold 11px Open
Sans, sans-serif;letter-spacing:1px;padding:10px
20px;background:#000000;color:#ffffff;}
</style>
</b:if>
</b:if>
Note: This code uses jQuery library, so if you already have
jQuery on your page, please remove the line in red highlighted above.
Click 'Save template' button and check the 'Load More Posts'
button in your Blogger blog.
No comments:
আমাদের পোস্টগুলি ভালো লাগলে কমেন্ট করে আমাদের উৎসাহ দিন