Customize Newer Posts,Home and Older posts links

August 22, 2009

The links for Newer Posts,Home and Older posts links at footer of blog page are used for navigation.These can be customized and images can be used here instead.
This post will explain how to do this.



For doing this :
1.log in to your blogger account.

2.then click on Layout > Edit HTML > First download a copy of your template

3.then click on Expand widget templates.

4. search for below code (copy the code in red color and use Ctrl+F to find it in your template)



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

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>


The first part of code in red is for Newer Posts ,so change this to <img src="http://URL of your image "/>.
Replace 'URL of your image' with any image you want to replace for 'Newer Posts'.
Similarly get images for Older posts and home and replace them respectively.

NOTE:second part of code in red is for Older Posts,
and the next 2 parts are for Home.
After completing click Save Template.

You can free icons at Icon finder

1 comments:

Anonymous said...

its really easy,thanks

Post a Comment