How to replace a picture with next and previous page links in blogger ~ My Technology Updates

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:

► placing a picture beside next and previous links (a small icon, arrow, or whatever...)

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...
◄Placing picture beside links►

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

...replace the given image Red link with Green of your hosted picture...

...use small icons...

<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'><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
+ "_blog-pager-older-link"' 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'><img
src='http://i40.tinypic.com/sfcox4.jpg'/></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...