How to have labnol like Newer and older post in blogger

 

Most of the blogs will have Older Posts or Newer Posts after the article or in the footer section.

  You can replace it with post titles by following some simple steps.


1)  Sign in to your Blogger Dashboard.

2) Click on the blog you want to change ( In case you have more than one blog )

3) Click on template.

4) Take a back up of the template and then proceed.

5) Now click "edit HTML" and proceed.

6) Find </head> ( Use CTRL+F )

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

8) Save the Template.

9) Now go to the Layout.

10) Click " add gadget " and click " HTML/Javascript "

11) Now copy the code below and paste it in the gadget and save it.

<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>

12) Now you will see the Post title instead of Older and newer post as shown below in the screenshot.