Replace Older and Newer Links with Post Titles in Blogger Posts

Rate this Post:

{[['

']]}

Today i am going to share a Very Simple Trick. Many Bloggers Hate Older and Newer Links Buttons and replace them with Page Navigation. But when you open a post, still there is Older and Newer Links. How to Get Ride of that Links???

Just Replace them with Your Next and Previous Posts Links to Make it more attractive.

Here are Few Steps to follow.

Step 1: (Optional)

Add Jquery Plugin to blogger, To do So….

Login to Blogger
Goto Template
Edit HTML
Expand Widgets

Look for </head> and Place the following code Just Above/Before this Tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>

You can Skip This Step if you already have Jquery Plugin Installed.

Step 2:

Now look For ]]></b:skin> and Paste the follow code above/before this tag.

#blog-pager-newer-link {

font-size:85%;

width:200px;

text-align:left;

}
#blog-pager-older-link {

font-size:85%;

width:200px;

text-align:right;

}

Save You Template.

Step 3:

Now Goto Layout. Click on Add Widget and Choose HTML/JavaScript and Paste the Following Code.

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