Easily create A profesional website by blogger(part-6)How to add your blogger Load More Posts

ads

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.

 keyword:how to add see more post,add blogger see more post,add blogger load more post,how add blogger load more,add blogger read more post,বল্গে যুক্ত লোড মোর ইফেক্ট,কিভাবে বল্গে সি মোর ইফেক্ট যুক্ত করবেন,বল্গে ্লোড মোর পোস্ট যুক্ত করার উপায়

 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:

 

How to add your blogger Load More Posts

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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>

 Get code

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.