How to Replace Older and Newer post links with Post titles (for Blogger blogs)

Posted on May 09, 2014 by 
How to Replace Older and Newer post links with Post titles (for Blogger blogs)
In our Blogger blogs, After post body we see 'Older post' 'Newer post' links to navigate between next post and previous post. But This 'Older post' and 'newer post' link is very effective. Because these links can not tell a visitor what coming up next or what post they left behind also 'Older post' 'newer post' link reduce your pageview and bounce rate.
So getting more descriptive about your site's content to visitor and increasing pageviews, here is a Blogger tutorial for you what can change your Blogger template's boring 'Older post' 'Newer post' link with next and perv post's title (jquery powered). Let's see how to do it, read on-


How to Replace Older and Newer post links with Post titles



This Blogger customizing tutorial has two step to go through, Read on:-
How to Replace Older and Newer post links with Post titles

First step: Installing jquery library
First embed this jquery library into your template-

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


To embed it log in to your Blogger,
  • Go to 'Template' tab than select 'Edit Html'
  • After it find (using Ctrl+F or Cmd+F) into code snippet </head> 
  • Then copy the following line and paste it before </head> 

Second step: Adding the code
Now it's time to overwrite the default code, From Blogger dashboard,
  • Go to 'Layout' tab, from sidebar select 'add a gadget' 
  • Select 'Html/javascript' from pop-up window. 
  • Copy following code and paste all in 'html/javascript' save template.

<!-- crawlist.net replacing Older and Newer post Starts -->
<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>
<!-- crawlist.net replacing Older and Newer post ends-->

After doing all these now check out your Blog, Your template don't showing 'Older post' 'Newer post' link anymore, Now it showing Next and Perv post titles. Plus it will show Titles of the first post for the next and perv pagination on Homepage, Label pages, Archive pages. Also mouse hover on next perv post title, tooltip will be appear to tell what is 'Older post' and what is 'newer post'.

Template compatibility
Will work on any template with stranded structure. now Most of template have jquery code (step 1) installed for supporting any widget. So if your template already got this code installed, skip Step 1, begin from Step 2 see what happens, Also not gonna work on default mobile template and Dynamic templates! 

So how it working on your Blogger blog, don't forget to mention :)