Customizing "Newer + Older Posts" Link in Footer

January 12, 2009

We're going to customize our Blogger footer a bit. To be more precise, the links Newer Post, Home and Older Post that we can find on the very bottom of the post.

WHAT ARE THOSE?
For those who do not know, Newer Post, Home and Older Post are links that appear on the bottom of the posts. When visitors click on, lets say, Older Posts, it will take them to the Page with the set of your previous posts.
The number (set) of the posts on this page will be the same as the number of the Posts on your main page (don't think that a click on the Older Posts will open ALL of your Posts!)
You can adjust the number of the posts on the main page going to LAYOUT ► PAGE ELEMENTS ► and clicking on Edit in the BLOG POSTS box.....

WHY IS THIS SO IMPORTANT? IS IT AT ALL?
It is. This is a great navigation tool for your visitors. If you make these links more visible and eye catching, people will click on them, and will be dragged into the maze of your Blog posts...and stay there forever and ever...
Ok, seriously, I suggest doing this.

SO, WHAT CAN I DO?
This is a fun part. You can customize these links in Blogger in a few ways:

► changing the text of Newer, Older, Home links
► placing a picture beside them (a small icon, arrow, or whatever...)
► placing a picture (image) instead of these links

First, back up your Blogger template. Avoid the worst. Put safety first.
When you've done this, let's identify the code we're going to mess around with....Go to:
LAYOUT ► EDIT HTML ► click on Expand widget templates in the upper right corner....Locate this part of the 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, as you can see, there are three groups, one for each link:
► pink represent the code for Newer Post link
► orange for the Older Post
► green for Home
► white wraps all of these up...

◄Changing the text of the links►

You need to REPLACE following parts in original code with ANY TEXT you like:
► replace <data:newerPageTitle/> with, for example NEXT POST
► replace <data:olderPageTitle/> with, for example PREVIOUS POST
► replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE
Click here to see the complete 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'>NEXT POST</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'>PREVIOUS POST</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>HOMPAGE</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>

◄Placing icon/picture beside links►

You will have to INSERT the code for picture:

<img src='http://i42.tinypic.com/zn4qic.jpg'/>

...replace the part in orange with URL of your hosted picture...
...use small icons...
Click here to see the complete 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'><img src='http://i42.tinypic.com/zn4qic.jpg'/><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/><img src='http://i40.tinypic.com/sfcox4.jpg'/></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>

◄Picture/image INSTEAD of links►

This one is my favorite! You can place any kind of picture you want! All you have to do is use this code for the pic:

<img src='URL ADDRESS'/>

...just replace the part in pink, with the URL of your hosted picture...
...and in code, REPLACE the original link code for text with picture code:
► replace <data:newerPageTitle/> with the pic for newer (next) posts
► replace <data:olderPageTitle/> with the pic for older (previous) posts
► replace <data:homeMsg/> (only the first one) with the pic for homepage...
Click here to see the complete 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'><img src='URL ADDRESS'/></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'><img src='URL ADDRESS'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='URL ADDRESS'/></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>

That's about it....Oh yes, one more thing:

◄Switch places of the links►

If you find the position of Newer/Older post awkward (I do), you can switch their places easily. Making Newer posts appear on the RIGHT side, and Older posts on the LEFT side (like a book). To do this, go to LAYOUT ► EDIT HTML, and find the following part in code (CSS style):

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

...just switch the float style, so it will look like this:

#blog-pager-newer-link {
float: $endSide;
}

#blog-pager-older-link {
float: $startSide;
}

...Ok, this is really it now....be creative, you can do whatever you imagine...

If you need help, or have some ideas, ask, share...

Smile!