How to Replace Newer, Older & Home Navigation Links with Image Buttons
In this tutorial i show you How to replace the Newer, Older and Home Navigation links with image buttons. These Navigation links are located at Beneath of Post(s) Section. If you are using the Numbered Page Navigation widget, these links are visible on each post only. because the numbered page navigation is not works on single post page. and by adding these image buttons, there is no effect takes on page navigation widget.
The Icons are used in this tutorial is Designed by David Lanham – Amora Icons, You can use you own icons.
How to Replace Newer, Older & Home Navigation Links with Image Buttons?
- Go to Blogger Dashboard -> Design tab -> Edit HTML tab
- Click on Expand Template Widgets checkbox
Replacing the Older Link
Search for <data:olderPageTitle/>
and replace with below code
<img src='http://1.bp.blogspot.com/-xtb-_7jEjIY/Th69y6t9sVI/AAAAAAAABKQ/slLsdQ43ZMc/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>
Replacing the Newer Link
Search for <data:newerPageTitle/>
tag and replace with below code
<img src='http://2.bp.blogspot.com/-Odp_sQbM7_s/Th69zJM7FcI/AAAAAAAABKU/cjzpZkRMtM0/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>
Replacing the Home Link
Search for <data:homeMsg/>
tag and replace with below code
<img src='http://2.bp.blogspot.com/-Tm9sP0CPQBs/Th69yh2PpZI/AAAAAAAABKM/R_0wxEBGVuM/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>
You can change your own icons by replacing the image Url in the above three codes.
Hope this will help you and Drop your Comments.
Saif Mobhani says
Can you provide more images for Next Previous and Home button for different backgrounds?
à²à³à²à²£à³à²£ says
I didn't got any result when i search for above in html editor!! What to do??
My e-mail: keshava.gn@gmail.com
By Ä°zocin says
Thank you
byizocin.blogspot.com
salman ahamed says
it is not working in my blog
tomy Quyá»n says
oh.i like it
CyberMales says
Working in my blog..thanks
Shivam says
Thanx..it worked on my blog…
My blog : http://freen8apps.blogspot.com/
Beetles says
can I have blue set of icons please
Himanshu says
Great trick!!
Abu Shaleh says
I Really Like this. Thanks
PLAY IT COOL........! says
hey…it works on my website…
www.flickyinfo.in
Paul Santosh says
Oh my God! Your website is increasing traffic and Alexa Rank Day-by-day when I saw this blog before the Alexa Rank was 125,000 and now it's 47,415!!!!!!!
Oluvil Campus Blog says
Nice post.I have added these buttons and your numbered page navigation buttons.
ThePrince says
hello my friend im soufiane, i came from google Search
your blogger is very awesome , and i like to add this plugin for submite feeds to my blogger
this is what i talk about
http://i54.tinypic.com/2ur1p4k.png
i come back later for your response to me , thank
Durgesh Kumar Mandal says
hey friends nice help visit my blog http://www.affiliated.tk/
Umesh Tarsariya says
wow…. great…. no words for it!!!!!!!1
kimduccz says
I'm very like it in Blogspot…Thanks
top 5 anything says
nice, thats great to replace it. great info to my blog
sumitgogawat says
Is there any option to replace read more with Flash buttons.
Bygodwilling says
beautiful template blogger and beautiful tutorial..you are awesome blogger!
jatinder singh says
show for sometime then automatically hide
Mobile Millions says
i can't see older/newer post home image works please help me..
mobilemillion.blogspot.com
Design blog says
I like it,thanks
anil says
hi nice post…
pls upload blog post templetes
if posible check my blog http://cinerak.blogspot.com/ once
i need to change blog posts style or recent postes style
pls provide templetes related that topie
pls mail me
Bekasizone says
Thank’s for share…
Nice post…
M.J SUDHI says
Can I change the Home, Newer, Older button links with an external Web link?
Harish says
yes! you can..
Asian Tamil says
its works
thanks
alenn says
it’s really help me.. thanks.come visit my blog
Sagar says
Thanks I’ve successfully replaced the links with post titles but now I want to display the blog-pager above the comments section, how do I do that?
KALPESSH says
I HAVE BLOG NAME AS HACKINGHANDS.BLOGSPOT.COM
I HAVE INSERTED THESE BUTTONS BUT I WANT TO INCRESE THE SIZE OF THAT LINE WHERE OLDER POST AND NEWER POST ARE PLACED…….
Abhishek sony says
http://lolsplanet.blogspot.com bro nice widhet but not showing on the top of the post please help me as soon as possible thanks
Abhishek sony says
same the case is with my this blog http://nannu4u.blogspot.in
asiantamil says
thanks for your guidance. it works
Jayr says
Thanks for this post men.. I’m gonna use this for my blogger blog,
Swetha says
thanks a lot. it works
Sumit Kumar Gogawat says
Hi Harish
I need your help. I want to redirect my blog to a domain name. Would you suggest me some domain service provider (Cheap & Best) & method how to change blog to a standard domain name. Please mail me.
Harish says
after upgrading to Custom Domain, Blogger will handle redirection for you!
About Domain provider, Namecheap is best. Namesilo is another choice.
nepali keto says
for finding such photos icofinder.com is *****
mynmaster says
Awesome
hhrma says
nice blog trick, but still not work on my template. i could not find this on the conde
craig says
nice one thanks
LouAnn says
Thanks so much, changing the “old” worked!
jamb 2013 says
thanks alot sir for this wonderful update, this navigation buttons are beautiful.
i have added it to my blog
Lizzie says
Hi, I couldn’t find the codes, all I could find was this:
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
Mahendran says
Really awesome content
tekashi says
Hi,
I changed it as you write, but navigation buttons appears only in 1st page. They are not visible on 2nd etc.
Ù ÙÙع ÙردبرÙس says
thanks for your guidance. it works ^_^