How to Replace Older/Newer Post buttons with Post Titles in Blogger

You must have seen some popular blogs who have replaced older and newer post buttons with post titles and you must be wondering that “how to do it?” Therefore, today in this article, we will show you how to replace older/newer post buttons with post titles in blogger.

When you replace older and newer post buttons with your post titles then it shows the professionalism and helps your reader to find out that what actually they are missing, with reference to your old post. In this way you can get more exposure for your older posts too which is why many pro bloggers are using this tactic.

So, here are the steps which you need to follow in order to replace that older and newer post buttons with your post titles. Now without taking your time more, we’d request you to get towards the steps; 

First of all, Sign in to your Blogger blog, go to Template >> Edit HTML >> search for </head> tag. After finding </head> tag, paste the following code above it. (Note: Only follow this step if you are not using any jquery.min.js file on your template) so be sure you first search for jquery.min.js.

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

Now, you need to click on Layout from the sidebar and then select Add a Gadget. From the list of gadgets search for HTML/JavaScript and select it. Now you need to paste the following code in the HTML Text box.

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

Now in last you need to click on Save button. 

You are done now. Now older and newer post links will be replaced with your post titles. We are sure it would have been proven helpful for you guys. If you have any queries to ask then lend them in the comment box. We shall get back to you as soon as possible.

Was it helpful? If it was then don’t forget to share this article with your other friends on Facebook, Twitter or Google+.

Share this post