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 + "_blog-pager-older-link"’ 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,
- 5 Best Blogspot Blogger Hacks
- Replace Home and Posts Links by images
- Ads Theme Blogger Template
- How to Earn Six Figure Money from Blogging by Darren Rowse
- Florist - Free WordPress Dating Theme
- Quick Solution to Protect Your Blog From Spam Harvesters
- 25 Ways to Use the Web to Find Content
- Best 15+ Blogger Hacks Of All Time
- Hover Effect Thumbnails Only Related Posts
- 23 Most Beautiful Free WordPress Themes for 2010
- 6 Ways To Stay Focused on blog
- Know How to Create a Blogging Community
- 6 Tips To Heart-Stopping Post Titles
- Important Tips For Using Labels On Your Blog
- google wave in blogger?Image based tutorial
- Displaying total number of posts and comments to blogger
- Add Flash Files to your blogger
- Adding animated GIFs to blogger
- Change color and size of default tag cloud in blogger
- Display More Targeted AdSense Ads on Your Blog
0 comments:
Post a Comment