Replace Home and Posts Links by images

Add This To Del.icio.us Share on Facebook StumbleUpon This Add to Technorati Digg This

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:

 

 

 

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

For Further Reading,

Blogger, Blogger Tips, Blogging, Blogspot Tips, Webmaster Tips