Customize The Newer, Older Posts, Home Links in Blogger

This post shows you how to customize the "Older Posts", "Newer Posts" and "Home" links. These links can be found right above the footer of a Blogger blog....



  1. Change the text of the links.
  2. Replace the text with image.
  3. Place image beside the text.
Locate and Understand The Codes
Step 1: Goto your Blogger, Design > Edit Html.


Step 2: Locate / search for <b:includable id='nextprev'>
Below are the set of codes that associate with the links:
------------------------------------
<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>
------------------------------------
Legend: 
Black=wrapper code
Red="Newer Posts" link
Blue="Older Posts" link
Green="Home" link

Change The Text
To change the text of the Newer, Older Posts and Home links, these are the codes that you need to replace with your customized text:
  • <data:newerPageTitle/>
  • <data:olderPageTitle/>
  • <data:homeMsg/>
Replace The Text With Image
To replace the text with images, replace the codes:
  • <data:newerPageTitle/>
  • <data:olderPageTitle/>
  • <data:homeMsg/>
with:
<img src='URL ADDRESS'/>
Place Image Beside The Text
To place image beside the text, you can either append or prepend the codes:
  • <data:newerPageTitle/>
  • <data:olderPageTitle/>
  • <data:homeMsg/>
with:
<img src='URL ADDRESS'/>

Whatever image icon you want to set in your older ,newer post button...Just change above three code with there respective URL of your new Icon :)

Thank you            
Posted by