Replace Blog Pager Links with Post Titles in Blogger

Designing template for Blogger Platform is not as difficult as it seems. This month i was very busy designing my template. While doing so i tried to replace the Newer and Older post links with their respective post titles.

While designing the template i was trying to keep the design minimal and functional at the same time. Its really a good experience designing my first template. While making some changes to my template i tried replacing Newer Older post links with their post titles.

If you are trying to do the same follow the steps properly in order to change those static texts to dynamic post titles.

Loading jQuery library

This hack works only if jQuery library is available on your blog. To load jQuery library adding following code before .

Install Bluestacks with Offline installer

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

Adding the code

In order to add this code go to Design > Page Elements > Add A Gadget and paste this code into a HTML/Javascript gadget.

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

This jQuery script will work instantly and you can test it on your post page. You can easily try to customize the Newer or Older post title using CSS. Try it and share the results with us.

Related Post: iPhone 7 Concept Video That is Too Real to be True

Enjoy this article? Get Free Updates