How to Customize “Newer + Older Posts” Link in Blogger Footer
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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"’ 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>
<div class=’clear’/>
</b:includable>
Here part highlighted in Red is for Newer Post link, Green for Homepage and Blue for Older Post link.
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.
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='http://i42.tinypic.com/1zzjpk1.png'/>
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='http://i42.tinypic.com/34ns01u.png'/>
Here you can use your own set of icons; for this just replace the tinypic image link with yours image link.
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
Article written by Typhoon
Yo! I am Typhoon a.k.a Sushant, a 16 yrs. old blogger from India and the owner of SmartBloggerz. Here I try to share useful Blogging related articles which would help a blogger to succeed. You can connect to me on Twitter.
Typhoon has written 316 superb article(s) on this blog
Related Posts
Don't be shy ;) Share your thoughts on this article by commenting below. Remember that this is a do-follow blog with many more exciting features!
26 Comments Add yours
January 18, 2009
2:56 pm
Nice Tips…
January 19, 2009
5:40 am
Thanks Typhoon for this wonderful hack. I have implemented it in my blog.
January 23, 2009
8:46 pm
really good tip, i will use this at my blog
Twitter: @gofree
July 28, 2009
2:59 am
Great tut, dude.
Thanks a lot
Twitter: @wendiwinn
September 2, 2009
1:33 am
thank you so much for this!
wendiwinn´s last blog ..sunday snippets
September 9, 2009
3:02 am
does this work for old blogger in blogspot?
dexter´s last blog ..Zona do Leitor – Horizonte
Twitter: @smartbloggerz
September 9, 2009
3:43 pm
NO it won’t as the codes have changed..
September 16, 2009
3:05 pm
Thank you for posting this. It was very helpful.
Nicquee´s last blog ..Earning Cash Online
September 16, 2009
3:13 pm
Thank you for sharing this. I implemented this in my blog.
October 17, 2009
1:43 pm
Hello,
My blog template is a custom one. I can’t seem to add this codes to it. I don’t know how. I’ve tried to find other codings on adding the ‘older post’ and ‘newer post’ link but they dont work. Could you help me?
Thanks.
Twitter: @smartbloggerz
October 18, 2009
6:45 pm
Have you made the template on your own? Have you properly added all basic blogger codes to it?
October 19, 2009
4:12 pm
I took the base code from someone else and I customize it. But the base code I have doesnt have the ‘older and newer post link’. So I tried googling about it but there were none that could work.
Thanks for responding to my problem
Twitter: @smartbloggerz
October 19, 2009
4:18 pm
Your blog doesn’t even have this code “” ?
October 19, 2009
11:23 pm
Nope. Maybe I could send you my coding and you could take a look. Is that okay with you??
October 20, 2009
3:45 pm
thank you very much for this useful tweak;
it worked perfect!
vinolia´s last blog ..Channa Masala (Chickpeas Curry)
Twitter: @smartbloggerz
October 20, 2009
8:04 pm
Glad to see that…
Twitter: @senthilramesh
December 13, 2009
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
Twitter: @murk_core
December 25, 2009
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
Twitter: @tycoonblogger
February 6, 2010
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
March 3, 2010
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.
Twitter: @smartbloggerz
March 3, 2010
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:
http://www.digitaltrends.com/computing/google-to-stop-supporting-internet-explorer-6/
March 3, 2010
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.
Twitter: @smartbloggerz
March 3, 2010
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.
Twitter: @smartbloggerz
March 3, 2010
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…
March 3, 2010
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…
http://www.bloggerplugins.org/2009/09/numbered-page-navigation-for-blogger.html
Thanks for your help though!
Twitter: @smartbloggerz
October 20, 2009
1:37 pm
Ya send me the modified and the raw template file so that I can check it out…Make sure you send me the full template file..