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

Author: | Posted in Blogger 8 Comments

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 😀 This post explains how you can replace these links with images to make the footer of your Blogger Blog look attractive.




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>

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

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

Replace the code in Red by

<img  src='https://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='https://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='https://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 🙂

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

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

  • How to do this for wordpress i want to replace my newer and older posts link with images any help??

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

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

    • 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 🙂

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

    • You can contact me via the contact page