Change Newer Posts, Older Posts and Home Links In Blogger

As requested by Mohammad, from TecFun, here's a simple hack to change the Older posts, Newer Posts and Home links in your blog (displayed below all your blog posts):

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>

Now carefully replace the colored code regions with your own custom image icons.
The first red colored code is for "Newer Posts" link.
The second red colored code is for "Older Posts" link.
The blue colored codes are for "Home" link.

For icons, you can visit this web site:
Icon Search

To add images, simply use this code:

<img src="http://DIRECT_LINK_OF_YOUR_IMAGE.jpg"/>

Finally save your template, that's it !

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts