How to Customize “Newer + Older Posts” Link in Blogger Footer

If you are a blogger user then you might know that old ugly looking link for Newer-Older Posts and Homepage. So I decided to change this thing in my blog and now will tell you how to do it in your blog easily. This will help you in easy blog navigation for your blog readers also it will look more attractive than previous thus it will help in increase in page views.

How to do this?

First of all backup your template for any unnecessary problems and for each trick we will go to LAYOUT ► EDIT HTML ► and then click on Expand widget templates.


Then there try to locate this 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>

Here part highlighted in Red is for Newer Post link, Green for Homepage and Blue for Older Post link.

Trick1. Modifying the Text

In this trick I will tell you how you can just do a simple gambling of text in your template to make it read better.

Just replace the following parts from the above given code from your template:

  • 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.
Trick2. Adding icons near to it

In this trick I will tell you how you can just add a nice looking icon near to the text.

To place an Icon before Newer Post or any text which you have used; just place below code before <data:newerPageTitle/>

Here is the code:
<img src='http://i42.tinypic.com/1zzjpk1.png'/>

To place an Icon after Older Post or any text which you have used; just place below code after <data:olderPageTitle/>

Here is the code:
<img src='http://i42.tinypic.com/34ns01u.png'/>

Here you can use your own set of icons; for this just replace the tinypic image link with yours image link.

Trick3. Adding Only Images in place of text


In this trick I will tell you how you can add only images in place of text.

  • replace <data:newerPageTitle/> for Next Post with <img src=’YOUR-IMAGE-LINK‘/>
  • replace <data:olderPageTitle/> for Older Post with <img src=’YOUR-IMAGE-LINK‘/>
  • replace <data:homeMsg/> for Homepage with <img src=’YOUR-IMAGE-LINK‘/>

Make sure to replace the highlighted part above with your image link.

Need any help? Feel free to reply below or if not possible to do these tricks then just send in your blogger account info to me via mail and I will place the thing in position for absolutely no charge 🙂

Inspired by BlogBulk Tutorial


Top 10 Search Terms:

• blogger older posts • OLDER POSTS BLOGGER • older post blogger • code ältere posts • how to add older posts link in blogger • older posts blogger code • blogger older post • older post blogger code • blogger older posts code • blogger older posts link

No related posts.

32 thoughts on “How to Customize “Newer + Older Posts” Link in Blogger Footer”

  9. Hello,

    My blog template is a custom one. I can’t seem to add this codes to it. I don’t know how. I’ve tried to find other codings on adding the ‘older post’ and ‘newer post’ link but they dont work. Could you help me?

    Thanks.

      1. I took the base code from someone else and I customize it. But the base code I have doesnt have the ‘older and newer post link’. So I tried googling about it but there were none that could work.

        Thanks for responding to my problem 🙂

Comments are closed.