Change Newer Posts, Older Posts and Home Links In Blogger

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 !

Leave a Reply

32 Comments on "Change Newer Posts, Older Posts and Home Links In Blogger"

Notify of
avatar
Sort by:   newest | oldest | most voted
Mohammad Mustafa Ahmedzai
Guest

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

http://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____

View Comment
Divya Sai
Guest

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 !

View Comment
Mohammad Mustafa Ahmedzai
Guest
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… Read more »
Blogger Templates
Guest

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

View Comment
Mohammad Mustafa Ahmedzai
Guest

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___

View Comment
Blogger Templates
Guest

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 !

View Comment
pushkar
Guest

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

View Comment
bloggerstop.net
Guest

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 :-/

View Comment
brady
Guest

thanks m8! it worked well!

View Comment
shv-trix
Guest

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

View Comment
kerja keras adalah energi kita
Guest

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

thanks from Kerja Keras Adalah Energi Kita

View Comment
Manojkumar
Guest

Thank you sai.,,

Works perfectly..

View Comment
ADMIN
Guest

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

View Comment
anna
Guest

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 🙂

View Comment
Divya Sai
Guest

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.

View Comment
anna
Guest

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

View Comment
anna
Guest

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

View Comment
Divya Sai
Guest

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 !

View Comment
-
Guest

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

View Comment
Krish
Guest

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

View Comment
wpDiscuz