Change Newer Posts, Older Posts and Home Links In Blogger

As requested by Mohammad, from TecFun, here's a simple hack to change the Older posts, Newer Posts and Home links in your blog (displayed below all your blog posts):

1. Log in to Blogger
2. Go to Layout -> Edit HTML -> Click on "Expand Widget Templates"
3. Now search (CTRL+F) for this code in the template 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>
<div class='clear'/>
</b:includable>
Now carefully replace the colored code regions with your own custom image icons.
The first red colored code is for "Newer Posts" link.
The second red colored code is for "Older Posts" link.
The blue colored codes are for "Home" link.

For icons, you can visit this web site:
Icon Search

To add images, simply use this code:

<img src="http://DIRECT_LINK_OF_YOUR_IMAGE.jpg"/>

Finally save your template, that's it !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

33 comments

Write comments
March 03, 2009 2:25 PM delete

wow! Great Dsai, its really working just fine. See those buttons in action here

www.TECfun.co.nr


Dear Dsai, I would suggest some editions to your code. You have mistakenly colored in red the closing "a" tag. More ever the code that you gave for image is not followed by a closing tag " /> "
This hack worked for me Only after I edited the code the way I discussed above.

Thks a lot for accepting my request and for writing such a beautiful post.

One more request, why can't I copy my messsage in your message box, honestly its very irritating :(

Regards,
MOHD____

Reply
avatar
March 04, 2009 7:31 AM delete

Thanks for correcting mohd, I have made the changes in the code.....I was feeling sleepy while writing the post :)

there's some compatibility problem in firefox browser and this blog, due to which copying is not possible in the comments box...sorry for the inconvenience !

Reply
avatar
March 04, 2009 3:14 PM delete

I am glad u corrected them.
Divya Sai I am buliding a new blog based on miscellaneous tips and tricks. I am using "TWo Church" template for it. but man its really taking a lot of time to load. CAn you plz visit the blog and suggest some tips to reduce the loading time.

Here is the blog, you may look at

I am working on that multi tab widget at the moment but friend when I checked your source file you had different coding for your multi widget. When I inserted feedburner subscribe form into the first tab, all those text like "content 2.1...2.2......2.3.." fell well below the widget and looked really odd. help me correct it.

Regards,
MOHD___

Reply
avatar
March 05, 2009 9:27 AM delete

Hi Mohd,
I checked your new blog, and at my internet speed(256 kbps), it's loading quite quickly, but anyways you can read this post if you think it's slow:
http://bloggerstop.net/2009/01/check-how-fast-your-blog-web-site-loads.html

and the widget in my blog uses javascript and is very dif and complicated than the one described in the post, anyways in your blog that multi tabbed widget is showing content without any problems, so I guess everything is fine now....

Regards
Sai

Reply
avatar
March 05, 2009 10:37 PM delete

hi Sai,

I would appreciate if you check it again. It was working fine till yesterday but when I edited it, all problem I discussed above reappeared. Plz Help!

I am making a blog on miscellaneous tips and tricks and I will surely add you to my blog roll, for you are just too gud :)

Thks for encouraging me with my blog load time.

Regards,
MOHD___

Reply
avatar
March 06, 2009 8:49 AM delete

Hi Mohd,

you can read the explanation here:
http://bloggerstop.net/2008/12/how-to-create-multi-tab-widget-in.html
(latest comment)
just keeping things together :)

I'll be happy to see my blog in your blogroll, thanks for that !

Reply
avatar
pushkar
March 28, 2009 5:39 AM delete

http://www.bloganol.com/2008/11/revolution-crunch-template-for-blogger.html

i am using this template. but the problem is that there is no next & Previous page option in the template. Can you please help me..please

Reply
avatar
March 28, 2009 8:09 AM delete

Sorry buddy, I know about revolution template, although the required code is present in the template, but it doesn't show up in the blog :-/

Reply
avatar
May 16, 2009 5:36 AM delete

thanks m8! it worked well!

Reply
avatar
August 21, 2009 10:50 PM delete

how can i create vertical space between labels and share it icons ,:-/

Reply
avatar
October 22, 2009 4:59 AM delete

nice info..
oya.., how to change olderPageTitle with title post?

thanks from Kerja Keras Adalah Energi Kita

Reply
avatar
October 22, 2009 10:35 AM delete

Thank you sai.,,

Works perfectly..

Reply
avatar
November 30, 2009 11:47 PM delete

THANKS, IT HELP ME A LOT... VISIT ME HERE
http://latestbloggertemplate.blogspot.com/

Reply
avatar
anna
December 18, 2009 4:48 AM delete

Is there any way to put the "older/newer/home' links OUTSIDE the main wrapper, i.e. outside the main entry box? I hope I'm making sense...I'd be really grateful if you can help me :)

Reply
avatar
December 18, 2009 7:03 AM delete

Well yes that is possible, but why do you want to shift its position?
Anyways, if your template has been professionally desinged, then it should have comments where your outer-wrapper or content-wrapper ends like this:

<!-- end outer-wrapper -->

First download and save your template.
Then cut that "new-old-home" code and paste it after that comment.

Reply
avatar
anna
December 18, 2009 8:14 AM delete

You mean I'm supposed to look for the same codes you've posted above and cut/paste it after ...? Is that right?

Reply
avatar
anna
December 18, 2009 8:15 AM delete

I mean, after the 'end outer-wrapper'.

Reply
avatar
January 01, 2010 6:23 AM delete

Hey anna, sorry for replying so late...I was out of town. Have you solved it yet or are yet to find the solution?
BTW A very Happy New Year !

Reply
avatar
-
March 12, 2010 9:13 PM delete

Used it. Successful! Thanks much. http://asiawrites.blogspot.com

Reply
avatar
March 13, 2010 1:17 PM delete

hi dsai,i need Read More Buttons like in yours website.pls reply to me

Reply
avatar
March 13, 2010 3:09 PM delete

Hello Kishna,,,it's simple button made on photoshop, you can create one too, or search on internet for more such buttons.

Reply
avatar
March 19, 2010 3:50 AM delete This comment has been removed by a blog administrator.
avatar
April 20, 2010 8:07 PM delete

Hey there, I enjoy your website/blog. I want to remove the box that says "showing newer posts with a label etc...

I see by the info up top I can add a button, change color etc but how to remove the whole bit. I tried cutting out eh whole thing but got some sort of error code, HTML spacing something or other. I didn't save the edit so it was no problem-it went back to the original.

I would be the first to admit I'm new at this, it's my first blog. Great fun so far. Any help would be appreciated. Any suggestions for learning HTML, CSS?

The link below should be a page of the box I want to eliminate.

http://miketayse.blogspot.com/search/label/A%20Visit%20to%20the%20Library

Much thanks.

Reply
avatar
Anonymous
May 05, 2010 5:44 AM delete

Is there a way, You can display your next Page title and previous Post title itself instead of titling it as next and Previous

Reply
avatar
July 04, 2010 4:28 AM delete

Hi! I am really sorry to bother you. I am pretty new to blogging I was wondering how/where to add this now that Blogger has the Template Designer. (I am using the Awesome, Inc. template)When I changed to this new template it already has "Newer Post-Home-Older Post" at the bottom but I would like to change this and add a image for each instead of the words. (I uploaded the images I want to use to Flickr and have a URL)I have just not had any luck getting it to work. Thank you so much and again, sorry to bother you! Take care!
Laura
http://pumpkinbuttkittyfantasticfinds.blogspot.com

Reply
avatar
July 04, 2010 4:35 AM delete

Hey Laura,

Just make sure you mark the tick-box "Expand Widget Templates" and you'll find the code that has to be edited.
Feel free to ask your doubts here...

Reply
avatar
August 26, 2010 5:50 AM delete

My template does not show even new post older post or home. But all code as you mentioned I found it once I replace it. It is still won't appear to me. Please help and view.

www.creativelayer.blogspot.com:-/

Reply
avatar
February 04, 2011 1:58 AM delete

Thanks for sharing a very very very useful information. I used the info to optimize our blogs...:-)
Navigation is quite healthy nw...
Lv the post

Reply
avatar
April 11, 2011 5:27 AM delete

Hey Sai ...

in my Template neither New/Old/Home links nor That Page Number Navigation Works :-/

Plzz help me Bro ... :(

http://hack-krishna.blogspot.com - H4King Portal

-hk

Reply
avatar
May 22, 2011 2:15 PM delete

Hi Is There any Way to Turn Older posts and Newer Posts Buttons to Next Post Title, And Older Posts Title ?
Waiting for your Response :)

Thanks.

Reply
avatar
June 17, 2011 9:29 AM delete

how to change a link color only,[older and new] i dont want to change whole page link color.. help me

Reply
avatar
July 25, 2011 3:27 AM delete

hi...
i have a problem in my blog a/c is that,when we click on home link then i go to new post but i want to link to the first post.
would u plz help me to slove this problem

Reply
avatar
April 19, 2012 5:03 AM delete

very nice post ,thanks for sharing

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon