Replace Older & Newer post links with post titles

The Newer Post, Home and Older Post links are located at the bottom of your blog. They are parts of blog pager, which help readers navigate between pages and posts. If you’ve ever been to a WordPress blog, you might have noticed that it displays the actual post titles, instead of fixed text phrases.

Blogger default vs. WordPress style blog pager

 

This tutorial will show you how to do just that -changing those static texts to dynamic post titles. Let’s get to work:

 

1. Loading jQuery library

This time we will use jQuery. For jQuery codes to work, first you have to load jQuery JavaScript library.

Go to Design > Edit HTML and paste this  code before </head> line in your template:

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

Don’t add the code if your blog has some kind of slider/glider feature installed. It usually runs on jQuery, which means the code has been added to your template.

 

2. Adding the blog pager code

Go to Design > Page Elements > Add A Gadget and paste this code into a HTML/Javascript gadget. This code is based on the original code by Fiona of ETBlue.

<!-- Post title blog pager by BloggerSentral.com START -->
<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>
<!-- Post title blog pager by BloggerSentral.com END -->

 

On post pages it will show the actual titles of the next and previous posts. On index pages (i.e. homepage, label pages and archive pages) it will show the titles of the topmost post of the next and previous index pages. A tooltip with “Newer post” or “Older post” will appear when you hover the post title, making sure readers can tell which is which.

Want to hide or change the appearance of the blog pager? Read Style your blog pager.

Enjoy!