» » How to Change Newer Posts, Older Posts and Home Links with image In Blogger/blogspot

How to Change Newer Posts, Older Posts and Home Links with image In Blogger/blogspot

Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.

Now how to change these links with icons is very easy.

These are the links below pointed by arrows to be get replaced in picture which i was talking about
1. Log in to Blogger
2. Go to Layout -> Edit HTML -> Click on "Expand Widget Templates"
3. Now search (CTRL+F) for this code in the template code:

<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>
Find the code in red lines and replace them with lines in green following each red line-
.
<data:newerPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/Newer_post_icon.png'/> 
<data:olderPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/older_post_icon.png'/> 
<data:homeMsg/>
Replace with
<img src='http://bandofgirls.googlepages.com/home_icon.png'/>


Please Host these images to your hosting image service and change these urls with yours as they may exceed bandwidth.

Now preview it . If its Ok
You can save your template.

How the links will appear after changing these codes -

Related Posts