Customize the navigation feet to older or newer posts on Blogger

New logger incorporates a navigation feet on main page, labels and individual posts. This navigation feet contains links to “Recent posts”, “Older posts” and “Main page” without format or style. On this article we’ll show you how to customize it.

1. Go to “Layout” tab, also called “Design” from Desktop, and then to “Edit HTML”.



2. Check “Expand widgets templates” box, and in the text field, search the following code:

<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>

This is the code that handles showing the navigation links. You can realize because of these links:

<data:newerPageTitle/> – Recent posts
<data:olderPageTitle/> – Older posts
<data:homeMsg/> – Main page

3. Customization:

Change the text for another one. To replace the text for anyone you like, just have to replace the matching label on every link for our text. For example, for the newer posts link, we replace “” for “Newer posts”.

Change the text for an image. To replace teh text for an image we can follow the last steps and replace every label for a matching image.

Now we’re going to ofer you an example that you can use on your own blog.


<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img alt='data:newerPageTitle' src='http://bp0.blogger.com/_Zuzii37VUO4/Rf4lJS031KI/AAAAAAAAAfc/JItp8PeZF1U/s1600/botong_atras.gif' /></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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img alt='data:olderPageTitle' src='http://bp2.blogger.com/_Zuzii37VUO4/Rf4lEy031JI/AAAAAAAAAfU/iu3bL2eUbhM/s1600/botong_adelante.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img alt='data:homeMsg' src='http://bp1.blogger.com/_Zuzii37VUO4/Rf4lMi031LI/AAAAAAAAAfk/m7Qpa985MY0/s1600/botong_home.gif'/> </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>

Format links. If you just want to give a better format to those links, just change the attributes to the following classes:

#blog-pager-newer-link – For “Recent posts”
#blog-pager-older-link – For “Older posts”
#home-link – For “Main page”