How to Replace Newer,Home and Older Post Links With Images in Blogger

At the end of your Blogger Page, you would see links to Newer Posts, Home and Older Posts which doesn’t look good. Perhaps my perception would match yours :D This post explains how you can replace these links with images to make the footer of your Blogger Blog look attractive.

Before:

Before

After:

Which one looks attractive? Obviously, the latter. If you have good creativity, you can design buttons in photoshop and use them to replace these links.

You can refer this video to get a much better view.

So here is the procedure:

  1. Login to your Blogger account and click on Design->Edit HTML and check the Expand Widget Templates.Expand Widget Templates
  2. Press Ctrl+F and find these lines
<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>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Replace the code in Red by

<img  src='http://newerpostimage.png' alt='Next Post' />

Here newerpostimage is the image URL you want to use for newer posts link
Replace the code in Blue by

<img  src='http://olderpostimage.png' alt='Previous Post'/>

Here olderpostimage is the image URL you want to use for older posts link.

Replace the code in Green by

<img  src='http://homeimage.png' alt='Home' />

Here homeimage is the url of the image you want to use for Home link.

Recommended: You can host these images at tinypic

Click on Save template and view the changes in your Blog :) If you have any query, you can post it in the comments :)

  • http://travelwisconsin.us/ Shika Lachica @ Travel Wisconsin

    Thanks for sharing this article. It is worth a try.

  • http://travelwisconsin.us/ Angelica Adams

    Perfect definition of ideas , I might try this one, for my own curiosity, thank to this site.

  • http://www.risepk.com/blog/ Faiz Muhammad Khan

    How to do this for wordpress i want to replace my newer and older posts link with images any help??
    BEST SEO PLUGIN FOR WORDPRESS

    • http://www.blogotechblog.com Lalit Indoria

      You have paginaton plugins for WordPress. If you wish to have an image instead of page numbers, you need to tweak your index.php

    • http://www.risepk.com/posts/fb-popout-likebox/ Faiz Muhammad

      can you explain it ?? or make a tutorials for wordpress users

    • http://www.blogotechblog.com Lalit Indoria

      It depends on how you need it. It would be great if you can make it a little more clear or You can email me and I would do it for you for free :)

    • http://www.risepk.com/blog/ Faiz Muhammad

      Thanks for reply give me your email address i will drop an email to you with detail what i want

    • http://www.blogotechblog.com Lalit Indoria

      You can contact me via the contact page