How to Customize “Newer + Older Posts” Link in Blogger Footer

by Sushant Risodkar · 32 comments

If you are a blogger user then you might know that old ugly looking link for Newer-Older Posts and Homepage. So I decided to change this thing in my blog and now will tell you how to do it in your blog easily. This will help you in easy blog navigation for your blog readers also it will look more attractive than previous thus it will help in increase in page views.

How to do this?

First of all backup your template for any unnecessary problems and for each trick we will go to LAYOUT ► EDIT HTML ► and then click on Expand widget templates.

Then there try to locate this code:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if>

<b:if cond=’data:olderPageUrl’> <span id=’blog-pager-older-link’> <a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a> </span> </b:if>

<b:if cond=’data:blog.homepageUrl != data:blog.url’> <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a> <b:else/> <b:if cond=’data:newerPageUrl’> <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a> </b:if> </b:if>

<div class=’clear’/>

Here part highlighted in Red is for Newer Post link, Green for Homepage and Blue for Older Post link.

Trick1. Modifying the Text

In this trick I will tell you how you can just do a simple gambling of text in your template to make it read better.

Just replace the following parts from the above given code from your template:

  • replace <data:newerPageTitle/> with, for example NEXT POST.
  • replace <data:olderPageTitle/> with, for example PREVIOUS POST.
  • replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE.
Trick2. Adding icons near to it

In this trick I will tell you how you can just add a nice looking icon near to the text.

To place an Icon before Newer Post or any text which you have used; just place below code before <data:newerPageTitle/>

Here is the code:
<img src=''/>

To place an Icon after Older Post or any text which you have used; just place below code after <data:olderPageTitle/>

Here is the code:
<img src=''/>

Here you can use your own set of icons; for this just replace the tinypic image link with yours image link.

Trick3. Adding Only Images in place of text

In this trick I will tell you how you can add only images in place of text.

  • replace <data:newerPageTitle/> for Next Post with <img src=’YOUR-IMAGE-LINK‘/>
  • replace <data:olderPageTitle/> for Older Post with <img src=’YOUR-IMAGE-LINK‘/>
  • replace <data:homeMsg/> for Homepage with <img src=’YOUR-IMAGE-LINK‘/>

Make sure to replace the highlighted part above with your image link.

Need any help? Feel free to reply below or if not possible to do these tricks then just send in your blogger account info to me via mail and I will place the thing in position for absolutely no charge 🙂

Inspired by BlogBulk Tutorial

Top 10 Search Terms:

• blogger older posts • OLDER POSTS BLOGGER • older post blogger • code ältere posts • how to add older posts link in blogger • older posts blogger code • blogger older post • older post blogger code • blogger older posts link • blogger older posts code

About Sushant Risodkar

Yo! I'm +Sushant Risodkar & my nickname on web is Typhoon. I'm a 19 yrs. old young blogger from India & the owner of SmartBloggerz. If you are looking for SUCCESS as a blogger & affiliate marketer then SmartBloggerz is the right blog for you. You can follow me on Twitter or be my friend on Facebook. And hey! Don't forget to LIKE SMARTBLOGGERZ on Facebook. Read more About Sushant Risodkar.

has written 377 superb article(s) on this blog

Follow me on Twitter · Visit my website →

Senthil Ramesh December 13, 2009 at 2:03 pm

Hey Typhoon, you are good at coding and designing too? Do u have anyone for things or you do it by your own. In WP, most of the themes comes with these, so we dn’t learn any coding
.-= Senthil Ramesh´s last blog ..How To Use Facebook Effectively =-.

murkcore December 25, 2009 at 10:13 pm

thanks for this tut.. I’m going to try it on my blog.. Some people not familiar with blogger may think that the homepage of my blog is all there is cause the newer and older post links are to small or plain to notice..
.-= murkcore@hardcore,metal,metalcore,deathcore,blog,deathcore´s last blog ..The Storm, Picturesque – Hours (2009) – Progressive Metalcore/Hardcore =-.

Tycoon Blogger February 6, 2010 at 6:37 am

I love the images, this is a great tutorial. I have to read it a couple more times but when I find some time, I might make this change on my blog.
.-= Tycoon Blogger ´s last blog ..Blogging Social Community now invitation only =-.

Garçon Stupide March 3, 2010 at 2:41 am

Hello Typhoon – I used these excellent hacks for both my blogs a long time ago.

Suddenly, and only in Internet Explorer (not on Google Chrome) there are pink borders around the pictures I’ve used for next, home, and previous. I’ve searched and searched but there’s no info on how to get rid of them. 🙁

Typhoon March 3, 2010 at 2:41 pm

The clear answer to this is just Forget Internet Explorer. Even Google is saying there are going to stop their support for IE because IE browser is not really not compatible with the modern day codes and scripts. Have a look at what Google has to say:

Garçon Stupide March 3, 2010 at 4:38 pm

I agree, and I usually only use Chrome myself, but the fact is a lot of people still use IE so I need to fix it for them!

Secondly, Chrome doesn’t let you drag around page elements (in layout) or pictures (in the compose mode) like IE does.

Typhoon March 3, 2010 at 5:26 pm

Let me know your blog to let me look over the problem..I am not sure If I would be able to give support for that browser.

Typhoon March 3, 2010 at 5:28 pm

Oopsy..But How would I open your blog..? I am a FireFox user and I don’t use IE anymore since my Comodo Internet Security software have permanently blocked that browser from connecting to the web due to security reasons and I cannot remove that limitations also for temporary basis…

Garçon Stupide March 3, 2010 at 5:33 pm

Thanks, but the problem’s gone away now, since I added the Page Numbers widget instead of Next/Home/Previous. It’s not as pretty as having the picture graphics but it’s a useful tool to have…

Thanks for your help though!

l3utterfish April 13, 2010 at 10:41 pm

How to make this work in old blogger?
.-= l3utterfish´s last blog ..PIXELS de 8 bits en Nueva York =-.

Typhoon April 14, 2010 at 10:31 am

Why are you still using it? anything special in that?

Mei May 23, 2010 at 7:19 pm

I use Blogspot classic template version and I’ve made my own layout and such…
Now my problem is my ‘newer and older posts and comments’.
I’ve tried you codes but for some reason they won show up…

Can you please help me? Do you want me to send you my entire CSS codes?
Thanks x

Typhoon May 24, 2010 at 4:33 pm

Sorry, I can’t help you if you have a custom template and that too a classic version.

Subhash August 20, 2010 at 3:53 pm

Hi Typhoon. Good Blog. But i recommend you to make your blog load faster. Reduce some codes and images so that your blog becomes faster. Other than that everything is very cool here. GOOD ARTCILE. Why dont you apply for ADSENSE??

Typhoon August 20, 2010 at 7:34 pm

Maybe your net is slow or the server might be having some problem during connection through your host…My blog is already fast…It load up within 15 seconds..

I’ve adsense account but I don’t use it on this blog. I’m already making so much money that I don’t think I will be able to make with adsense.

Thanks for passing by..

Previous post:

Next post: