Replace Home and Posts Links by images in Blogger

Navigation Links in Blogger are visible as text links usually at the bottom of each page. It is always good to have images as links for navigation, simple text links usually do not attract attention but image links accentuate the navigation links.
This hack will show that just by uploading the images and replacing some code in your template, your image navigation links will be up and running.

The new navigation links will look like this:

Images For Home and New and Old Post Links

You can have images other than these for home and post links(newer and older).

Here is a simple hack to replace text in navigation links to images:

1. Go to Layout->Edit Html
2. Download Full Template (This is to backup your template)
3. Check the Expand Widget Templates

Older Posts

Search for this code

<data:olderPageTitle/> (For Older Posts)

it will look something like this

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

Now replace this code with the code below

<img src=’http://bloggertipspro.googlepages.com/older-posts.png’ style=’border:none; background:#FFFFFF;’/>

Newer Posts

search for this code

<data:newerPageTitle/> (For Newer Posts)

Replace it by the code below

<img src=’http://bloggertipspro.googlepages.com/newer-posts.png’ style=’border:none; background:#FFFFFF;’/>

Home Page

For home page you have to replace the codes twice.

Search for this code

<data:homeMsg/> (For Home Page)

Replace it by the code below

<img src=’http://bloggertipspro.googlepages.com/home.png’ style=’border:none; background:#FFFFFF;’/>

You can replace the images by just replacing the http://bloggertipspro.googlepages.com/home.png with your own image link location

4. Save the Template

  • Tanuj Lakhina

    I think I’d implement this.Only I need better looking forward and backward arrows or icons. Thanks for this idea.

  • gautam

    yes you can add your own photos by replacing the image link locations

  • Thanks for the article. Really cool. But, in my blog these link are not visible…
    .-= Anup@Hack Tutors´s last blog ..Some Thoughts and Voice Of Blogger =-.

  • Already using images on my blogger blog.These images can be really helpful to stand out your blogger blog design and decrease user bounce rate because they are more prominent than links.

  • Hi Gautam,
    Would it be possible to make the images change upon mouse over? For instance, mouse over the arrow and it turns orange. I would love help on this subject. I know how to make the two graphics, not sure how to code that though. Thanks!

  • Pingback: Best 15+ Blogger Hacks Of All Time | TelaBela.com-leading information hub...()

  • Great tip..I will try it and see if it works.

  • It works for me.Thanks for this information:)