How to replace the oldest posts and newest posts with next and previous links in blogger ~ My Technology Updates

How to replace the oldest posts and newest posts with next and previous links in blogger

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

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 + "_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>

<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►

◄Changing the text of the links►

You need to REPLACE following parts in original code with ANY TEXT you like:

► replace with, for example NEXT POST

► replace with, for example PREVIOUS POST

► replace (only the Red only) with, for example HOMEPAGE

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

...Ok, this is really 100 Percent Working....

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