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?

Important!!! Back Up your Template before Making any changes in Template.
  1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
  2. 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.

Comments

  1. Saif Mobhani says

    Can you provide more images for Next Previous and Home button for different backgrounds?

  2. ಕೇಚಣ್ಣ 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

  3. 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!!!!!!!

  4. 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

  5. Mobile Millions says

    i can't see older/newer post home image works please help me..
    mobilemillion.blogspot.com

  6. 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

  7. 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?

  8. 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…….

  9. 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.

    • says

      after upgrading to Custom Domain, Blogger will handle redirection for you!
      About Domain provider, Namecheap is best. Namesilo is another choice.

  10. 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;
    }