When you open a Blogger blog post, there are three links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress blog's display the post titles. But not Blogger.In this post change those static texts to dynamic post titles.We will apply this hack using jQuery.Just follow my steps and you will successfully replace your older and newer posts links with post titles.
For jQuery codes to work, first you have to load jQuery JavaScript library.How to replace older and newer posts links
1. Adding jQuery.
(Note - Skip this step if you have already added jQuery to your blog)
- Go to Blogger Dashboard > Design > Edit HTML.
- Now find for </head> tag.
- Add below code just above </head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>2.Adding The Blog Pager Code
- Now go to Page/Edit Layout.
- Click on Add a Gadget > HTML/Javascript.
- Paste below code and save it.
<!-- Post title blog pager by helperblogger.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 helperblogger.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.
it will be very helpful if u show how to replace newer older link with post thumbnail instead of post title. I've seen this in a website..
ReplyDelete@Eusuf - can you tell me the address of that website? so that we will get the Idea to work further
DeleteThis is great, thanks!
ReplyDeleteHey it's my pleasure,
DeleteThis comment has been removed by the author.
ReplyDeletefinally added that on my blog ,, i was searching but ,there was too long methods thanks rahul
ReplyDeleteregards,
H4ck3r Cracks
You should remember that it will load completely 3 pages instead of one every time user opens a page. I've discovered a better solution and described it here: http://blog-perevodov.blogspot.com/2012/09/blogger-replacing-older-and-newer-links.html. In short, I'm using external service to load data (and it's caching data too, so there's no multiple requests and delays every time somebody opens your posts). Try it, tell me what you think.
ReplyDeleteHow to add the url of an image instead of "→" and "←"? Thanks
ReplyDeleteThis is the fewest code to add and the shortest method to do the trick. Thanks!
ReplyDeleteThank you for this
ReplyDeleteTop Scam Reviews