Replace Older & Newer post links with post titles

The Newer Post, Home and Older Post links are located at the bottom of your blog. They are parts of blog pager, which help readers navigate between pages and posts. If you’ve ever been to a WordPress blog, you might have noticed that it displays the actual post titles, instead of fixed text phrases.

wordpress style blogger blog pager with post title

Blogger default vs. WordPress style blog pager

 

This tutorial will show you how to do just that -changing those static texts to dynamic post titles. Let’s get to work:

 

1. Loading jQuery library

This time we will use jQuery. For jQuery codes to work, first you have to load jQuery JavaScript library.

Go to Design > Edit HTML and paste this  code before </head> line in your template:

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

Don’t add the code if your blog has some kind of slider/glider feature installed. It usually runs on jQuery, which means the code has been added to your template.

 

2. Adding the blog pager code

Go to Design > Page Elements > Add A Gadget and paste this code into a HTML/Javascript gadget. This code is based on the original code by Fiona of ETBlue.

<!-- Post title blog pager by BloggerSentral.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 BloggerSentral.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.

Want to hide or change the appearance of the blog pager? Read Style your blog pager.

Enjoy!

62 comments to "Replace Older & Newer post links with post titles"

Liliana January 28, 2011 at 3:43 AM    

I have just done this as well, every time new good thing for my blog. Thanks!

Trailere HD January 28, 2011 at 5:32 AM    

very helpfull tut, thanks!

Anonymous,  January 28, 2011 at 12:10 PM    

my facebook page widget is noy working pls help me out

Unknown January 28, 2011 at 6:12 PM    

very usefull tips...
thank you so much

Greenlava January 28, 2011 at 8:53 PM    

@ahmmyreal
Please refer to Add a Facebook Like/Fan box to blogger.

@blogger_newbie
Thank you and welcome :)

t January 31, 2011 at 3:42 AM    

Thanks,i shall try it out now

Nikhil,  February 1, 2011 at 1:57 AM    

Hi,
Thanks for the this :)
please share some good Subscription Box theme/style with us.
i'm waiting for that even your one is good.
Regards.

lizz February 2, 2011 at 3:57 PM    

nice tutorial for blogger. thanks a lot for sharing.hehehehe.

delphi February 5, 2011 at 10:59 AM    

Hi, thanks for the tutorial. I want to ask, is that posibble to change position of the older post BELOW newer post?
Need ur reply. Thanks a lot

promotional merchandise February 5, 2011 at 7:16 PM    

I can find my wordpress blog by searching for the title of the blog, however, if I search for a particular post title it will not come up. Is there any way of making this happen?Also, any tips on personalising it so it looks more like it's own website

Greenlava February 5, 2011 at 11:07 PM    

@delphi
I see you've added this CSS snippet:
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;}

replace it with this:
#blog-pager-older-link {font-size:100%;width:200px;text-align:left;float:left;clear:both;}

delphi February 7, 2011 at 8:23 AM    

It's works. thanks. 2 more thing... he he...
First, I tried to make HOME link dissapear. But always failed. I tried to follow few tutorial but still failed.
Second, it's that possible to applying 2 navigation? U know, I imagine to apply number navigation for the global post, and UR navigation in the single post. I successed even on post body, but number navigation missing. And UR navigation being double (but I know what the problem for the double)
Sorry for my question. Thanks before.

Greenlava February 7, 2011 at 3:38 PM    

@delphi
1. To make the HOME link disappear, go to Customizing blog pager (Home, Newer Post & Older Post links)
2. Use conditional tags. To apply the tags to a gadget/widget refer to Display widget on specific pages in Blogger
and to apply it to template Targeting specific pages/URLs with conditional tags

Naim,  March 16, 2011 at 9:17 AM    

Terima kasih :)
Awak tahu Bahasa Melayu ke?

Greenlava March 16, 2011 at 12:51 PM    

@Naim
Sama-sama.
Saya orang Melayu, dari Malaysia :)

download software gratis April 6, 2011 at 2:19 AM    

terimakasih tips nya. sangat membantu..

Aini Sastra April 6, 2011 at 4:14 PM    

wow, thank's Friend

Ana farha April 9, 2011 at 11:17 PM    

tq 4 d tips..

Unknown April 24, 2011 at 11:35 AM    

ko mmg terbaek la.. byk aku bljr blogging dari sini

Greenlava April 24, 2011 at 1:26 PM    

@phycrewz
Thanks, sekadar kongsi apa yang saya tau :)

Ravi May 14, 2011 at 5:56 PM    

Thanks, it worked for me but it is displaying the post title four times instead of one i.e. 'title title title title'

can anyone help me to solve this?

Greenlava May 15, 2011 at 2:13 AM    

@Ravi
It looks okay now :)

idham June 28, 2011 at 12:18 AM    

how do i keep the older/newer posts in the index page (i.e. homepage, label pages and archive pages)...
Please help me...
I just want to replace the older/newer posts with post titles in the post pages only...

Can anyone help me ??

Greenlava June 28, 2011 at 3:32 PM    

@idham
Use conditional tag, as explained in Display/hide widget on specific pages in Blogger

Anonymous,  July 15, 2011 at 6:13 PM    

SyntaxHighlighter how to add that like in your blog please send me feed back to wonder.bajgain@gmail.com

Greenlava July 17, 2011 at 8:51 AM    

@Anonymous
Here's a tutorial for that:
How to show code in blog post

websilog July 27, 2011 at 9:46 AM    

thanks a lot for this post! it's very helpful. blogged about it and linked to your post as well :-)

Kurt Starnes July 30, 2011 at 2:02 AM    

This works great. I've been searching all morning, so I am happy now. :-)

Now, how do I move the newer/older post title navigation from the bottom to the top of blog post pages only and not the index page?

Greenlava July 31, 2011 at 7:40 PM    

@Kurt Starnes
To move the pager to the top, read here
To target specific pages, read Display/hide widget on specific pages on Blogger

Ahmad Subhan August 2, 2011 at 7:22 AM    

Oh my God, this is what I 've looking for all this time, thanks so much I've bookmark this post, btw may I repost this? of course I will write where I get it, this link post, thanks againOh my God, this is what I 've looking for all this time, thanks so much I've bookmark this post, btw may I repost this? of course I will write where I get it, this link post, thanks again

Greenlava August 3, 2011 at 12:54 AM    

@Hans Ganteng
Yes you may repost it.

Duy Pham August 27, 2011 at 5:05 PM    

The best of tuts, very awesome!

ed September 21, 2011 at 6:42 PM    

Hi,
nice tip but is not working fine here ,no title post displayed just >> and <<:

http://juegos-de-guerra.blogspot.com/2011/03/encyclopedia-of-war-ancient-battles.html

Is not working at all in this 2 :

http://e-euros.blogspot.com/2011/05/matrixmailscom.html

http://e-econsultores.blogspot.com/2011/04/panfleto-union-sindical-trabajadores.html

any idea to fix this?

thanks in advance

Greenlava September 24, 2011 at 5:08 PM    

@ed
For the first blog I think there is a conflict with the cufon font applied to post title.
As to the latter 2 blogs, I looks like the templates had the blog pager removed.

online writing jobs October 5, 2011 at 5:05 PM    

It's the most convenient for users as for me!

Jo Qusary October 26, 2011 at 12:52 PM    

Mine is working but the comment numbers are also displayed along with the post titles... how do I get rid of the comment numbers?

Greenlava October 27, 2011 at 12:55 AM    

@Jo Qusary
That's because your comment bubble are right in there with the post title:
[h3 class='post-title entry-title']
COMMENT BUBBLE CODE
...
[data:post.title/]
[/h3]

You need to move the bubble out of the h3 tag:
[h3 class='post-title entry-title']
...
[data:post.title/]
[/h3]
COMMENT BUBBLE CODE

Onefineham November 9, 2011 at 4:19 AM    

Awesome code, thanks for sharing. Worked like a charm.

Minhal Mehdi November 14, 2011 at 8:33 PM    

awesome tuttorial :) thanks for share

Anonymous,  December 7, 2011 at 10:21 AM    

Just thought I'd mention...

I was having problems putting this on my blog and then after several attempts found the problem! You see where it says .post-title:first? As it turns out, on my custom blog, the post title is actually called entry-title and it's H1, not H3 (as in the code on ETBlue's page). So, if you're having trouble with this code, first see what the post title is called (CSS) on your blog, then switch .post-title:first (here) or h3:first (ETBlue) to whatever your post titles are classified as (you can find it in your CSS code).

blog saya December 8, 2011 at 9:11 PM    

This makes more bloggers look pretty, thx

ZaaRz January 3, 2012 at 8:19 PM    

Hello bro.

My older post, previous post not showing in my blog. i have been editting for 2 days long, the code is in the template, but i wonder why no older & previous post not appear. would you mine to check my blog? ive given up already. T_T

TechGlobeX January 4, 2012 at 3:27 AM    

Dude its not working for me, your gadget code seems to be not working, please tell me what to do? i am getting nothing after applying your code on my blogspot blog.

I am confused between this code:
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first"

What to type before :first ?? << i dont have post-title code in my HTML coding, may be the name of title is something else. Please tell me what i have to change to make this code works for me. You can check my blog source code in my signature. Thanks

Greenlava January 5, 2012 at 7:24 PM    

@ZaaRz
Where is it? I don't see the code in your template.

@TechGlobeX
Looks like you've got it fixed.

MS-potilas January 10, 2012 at 2:21 AM    

This is very clever hack and the result is nice, but opening older and newer post using jQuery/javascript skews the stats :( Every visit in a post is counted as three hits in the stats.

So if one installs this, the rise in pageviews is not only because readers started browsing your blog more...

I think there is no easy way around this: if you want "exact" stats and exact post titles, titles should be fetched from feed, to make it not count on stats.

The Script Wallpaper January 15, 2012 at 7:30 PM    

hello BlogSentral (or GreenLava)
i have a problem...
my blog template doesn't show the newer post, home or older post in my blog template..

can you please check and give me for the solutions? why it is not appear?

thank's in advance....

Greenlava January 23, 2012 at 11:49 AM    

@The Script Wallpaper
I don't see the blog pager on pages other than post pages. I guess it was purposely customized that way.

Damar Zaky January 28, 2012 at 11:00 PM    

cool!, nice info!

Dwijayasblog February 14, 2012 at 12:30 AM    

Your instructions is short but clear enough to guide me implement the tricks. Many thanks.

Anonymous,  March 20, 2012 at 4:32 PM    

Cool! Used the conditional tag to display post titles only in item posts. Works brilliantly!

Shella De Santos April 9, 2012 at 11:19 AM    

it's very cool

Triyono May 5, 2012 at 7:08 PM    

i luv jQuery trick

Cynthia Rodrigues Manchekar June 20, 2012 at 5:10 PM    

I tried this just now, but it doesn't seem to be working. I can still see Newer Post and Older Post. Please help.

Greenlava June 24, 2012 at 9:37 PM    

@Cynthia Rodrigues Manchekar
Do not copy the code right off this page. Click the <> icon to view the raw code.

Blogging Sentral September 12, 2012 at 12:08 AM    

Nice post. Thanks for it..

Блог переводов September 12, 2012 at 6:52 AM    

It's cool, but not super-cool! The problem is that it loads 3 pages every time somebody opens your post. Completely! Looks like a bad thing to do. When I was thinking about the problem I discovered a better way to do that. See explanation here: http://blog-perevodov.blogspot.com/2012/09/blogger-replacing-older-and-newer-links.html. It's using external service to load titles saving users traffic, it also caches data making less delays. Check this out.

Mahendran December 7, 2012 at 1:10 PM    

Thanks for the post

kang topjer March 14, 2013 at 8:24 PM    

is this code showing in custom mobile template? anyway thanks for simple tutorial

Greenlava March 19, 2013 at 11:58 PM    

@kang topjer
Ni, it doesn't work on mobile templates.

Samantha Luxton June 27, 2013 at 3:18 PM    

What a complete tutorial got to give it a try... very useful. Thank you

Anonymous,  August 16, 2013 at 12:03 PM    

Thank you so much for this super easy tutorial. I have been trying for hours now, with the advice of several other tutorials, and no luck! This two step process worked wonders. Thank you!

Unknown September 27, 2013 at 10:59 AM    

terimkasih atas sharingnya kawan..
salam kenal dari Indonesia ..

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.