Many people who have blogs in blogger want to make their blog look professional but few of its default features make them little bit sad. One such feature is newer and older post links at the bottom of the page. Now I have just collected a tweak from Bloggersentral though there are many ways I felt this one as the easier one so I am sharing it here.
See the below image it is how it looks like when you have replaced it with the tutorial given below.
Step 1 : Log in to your blogger dashboard
Step 2 : Click on Template
Step 3 : Click Edit Html and then click Proceed
Step 4 : Find </head>
Step 5 : Paste the below code above </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>Step 6 : Save the template and go to layout
Step 7 : Click add a gadget and select Html/Javascript and add the below code into it and save.
<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}Now if you have done everything correctly just refresh your blog and you can see that your older page and newer page links are being replaced by the titles of the next and previous post.
#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>