Customizing blog pager (Home, Newer Post & Older Post links)

blog pager newer older postThis tutorial will show you five ways of changing the look of a Blogger blog pager. Blog pager are those “Newer Post(s)”, “Home” and “Older Post(s)”  links at the bottom of your blog page. Here they are:

  1. Changing the text with your own text .
  2. Replacing the text with an image.
  3. Switch sides between “Newer Post(s)” and “Older Post(s)”.
  4. Adding background to the text.
  5. Removing the pager from page.

Okay let’s proceed. First you have to find the blog pager code.

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Tick the  Expand Widget Templates check box on top right of the HTML window.
  5. Look for following 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>


You want to take notice three data tags in line 5, 10, 14 and 17. Below are the three data tags and their corresponding link texts.

 

Data tag Link text
<data:newerPageTitle/> Newer Post(s)
<data:homeMsg/> Home
<data:olderPageTitle/> Older Post(s)

 

1. Changing the text with your own

To change the link text with your own, just replace the data tag with your intended text, for example if you want to replace “Newer Post(s)” with “Newer Entries”, just replace

<data:newerPageTitle/> with Newer Entries

Note: Special characters such as “/”, “<”, “>” and quotation mark need to be converted to escaped characters, otherwise Blogger will interpret it as a part of your template code, which could potentially mess up your template. You can convert it with Quick Escape.

 

2. Replacing the text with an image

To use an image, replace the data tag with this:

<img src="YOUR_IMAGE_URL" />

YOUR_IMAGE_URL is the URL of the image that you are replacing the link text with.

 

3. Switch sides between “Newer Post(s)” and “Older Post(s)”

If you want to switch sides between  “Older Post(s)” and “Newer Post(s)”, look for something like this in the CSS section of your template code:

#blog-pager-newer-link { 
font-size:12px; 
float: left; 
} 
#blog-pager-older-link { 
font-size:12px; 
float: right; 
} 

just switch the floats - float:left; to float:right; and vice versa.

 

4. Adding background to the text

This can be done in CSS by applying background code to the respective HTML element classes, namely .blog-pager-older-link, .home-link and .blog-pager-newer-link.

For example to apply green background to “Older Post(s)”, use:

.blog-pager-older-link {background: #00FF00;}

To use an image as a background, use:

.blog-pager-older-link {background: url(YOUR_IMAGE_URL) no-repeat;}

 

5. Removing the pager from page

Two ways of achieving this:

  1. Actually remove the HTML element -by deleting the above HTML code.
  2. Hide it,  using CSS display:none. I prefer this method because it is easy to apply and easy to undo.

    For example if you want to remove the “Home” link, just add this code:

    .home-link {display:none}

    and if you want to remove all three links at once, use this:

    #blog-pager {display:none}

    To unhide, simply remove the added code.

Add the CSS code snippet (in no.4 and 5) right before ]]></b:skin> in your template. You can also add the CSS code snippets using custom CSS editor.

Want to replace Newer Post and Older Post texts with the actual post titles? Read Replace Older & Newer post links with post titles.

Enjoy!

34 comments to "Customizing blog pager (Home, Newer Post & Older Post links)"

I have a product that crafter use and I would like to have a blog page where crafters could share specific uses for the product and share pictures of their finished pages and we would like to share pictures of finished goods.

kerja keras adalah energi kita October 22, 2009 at 4:58 PM    

nice info..
oya.., how to change olderPageTitle with title post?

thanks from Kerja Keras Adalah Energi Kita

Greenlava October 23, 2009 at 1:51 AM    

Logo Designs,
I can't think of any Blogger hack/gadget that can do what you described.
The only thing that comes to mind is TwitPic (that enables you to share photos on Twitter).

kerja keras adalah energi kita,
I thought it, but haven't figured out how.

Rebecca October 23, 2009 at 9:44 AM    

Hi GL,

I have a problem with a huge white space between the comment box and the pager links. It only happens on individual pages where the comments are expanded. Every other page looks okay as far as I can tell.

Is there anything I can do about decreasing the white spoace?

As always, thank you so much!

Greenlava October 25, 2009 at 1:08 AM    

Rebecca,
I'm afraid there's nothing much you can do about it. The comment form is an iframe embedded by Blogger. We have no access to it.

Termite information November 4, 2009 at 4:21 PM    

Its a very informative and useful info for all blogger doesn't matter he is new or experienced. Thanks for this info.

Anonymous,  November 6, 2009 at 2:06 PM    

Thanks! I was able to change the text, switch sides, and add a color background, but NOT swap out the text with icons for some odd reason.
BTW, the floats were not left and right but rather startside and endside, but I understood your instructions. Good enough for me. Thanks again!

Khairi Mohd December 10, 2009 at 4:54 PM    

Hi Greenlava,

Have you figured out how to change the link text with title post? It is nice to see on other blogs. On saiful islam dot com for an eg.

One more thing, how to put that pager navigation at above post title?

Greenlava December 11, 2009 at 12:46 PM    

Khairi,
Nope, haven't figured it out yet. Saiful islam dot com runs on Wordpress, I think it's easier to get that done in Wordpress.

Swamykant December 21, 2009 at 4:28 AM    

Hi GL

I love your blog.. Although I came your blog recently, I have almost each and every post and all very informative as useful.

Meanwhile. I have an issue with my blog's new template.. I cant find the Blog Pager on the main page as well as on individual blog post.

Here is my Blog : http://kantspot.blogspot.com/

I love this template but because of the lack of navigation, i dont think it will be supportive

This theme was created by StudioPress and converted into Blogger Template By Bloganol when i asked the same query via comment, he has deleted the comment as well now


Can you please help me ..

Greenlava December 22, 2009 at 12:33 AM    

Swamykant,
Did you tick the Expand Widget Templates checkbox before searching for the code?

Rebecca February 22, 2010 at 10:14 AM    

GL, it's been a while!

My issue is the blog-pager. I simply use newer-home-older. These show up on all pages they should EXCEPT pages accessed through my archive and ONLY when a week of posts are selected from the archive. My archive is a weekly hierarchy.

When a single post from the archive is selected the pager looks fine, but when an entire week is selected I get dates of the newer and older posts instead of the terms "newer" and "older." For example, 20102102-home-20102001 (with appropriate spacing of course).

It's not at all obvious that these numbers are dates. Is there a way I can get these to say newer and older instead? I looked, but I'm stumped. Would you mind taking a look? Or if you need more info from me, please let me know.

Thanks!

Greenlava February 22, 2010 at 9:13 PM    

@Rebecca
Hey welcome back :)
Are you talking about the Healthcare Reform blog? They (the link texts) look okay from here.

Sasha Obriza April 25, 2010 at 5:06 AM    

Thanks for the article, it was really very helpful, but could you please answer one more stupid question: ho do I put the Pager bar on the top of the page rather than on the bottom of the page.
Thanks!

Greenlava April 25, 2010 at 11:22 AM    

@Sasha Obriza
I can't say for sure without seeing your template code, but you can try this:
In Layout>Edit HTML, with Expand Widget Templates ticked, find this code (replace [] with <>):
[!-- navigation --]
[b:include name='nextprev'/]
make sure it's "include", and not "includable".

reposition it below this code:
[b:includable id='main' var='top']

Make sure you preview first before saving.

Sasha Obriza April 25, 2010 at 9:25 PM    

@Greenlava
Oh thank you so much!
It did work from the first attempt :)
Thanks again!

Greenlava April 26, 2010 at 5:46 PM    

@Sasha Obriza
Great! don't forget to subscribe to Blogger Sentral posts feed :)

Beto Vargas November 13, 2010 at 12:12 AM    

Thank you for your tutorial on how to customize new and older post links. How can one either remove the dotted, bullet line in between the "older" and "newer"? Is it possible to add a solid line above and below them?

thank you

http://www.betovargas.com

Greenlava November 13, 2010 at 2:32 AM    

@Beto Vargas
Go to Design > Edit HTML and find this:
.blog-pager {
background: transparent url(http://www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center;
}

replace it with this:
.blog-pager {
border-bottom:1px solid grey;
border-top:1px solid grey;
}

Anonymous,  April 11, 2011 at 3:57 PM    

Thank you for this:

@Beto Vargas
Go to Design > Edit HTML and find this:
.blog-pager {
background: transparent url(http://www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center;
}

replace it with this:
.blog-pager {
border-bottom:1px solid grey;
border-top:1px solid grey;
}

I have been looking for days for this info!!!

Sydney June 30, 2011 at 5:10 PM    

how do i change the pager font?

Greenlava July 1, 2011 at 6:12 PM    

@Sydney
Use this CSS code:
#blog-pager {font-family: 1st CHOICE FONT,2nd CHOICE FONT;}

for example:
#blog-pager {font-family: Georgia,serif;}

Anonymous,  March 20, 2012 at 4:35 PM    

Loved the way you have presented this tutorial... everything related to newer/older links in one place. I just replaced the text of the "home" link with an image. Also used your other tutorial for showing post titles instead of older/newer post. Now it looks just perfect! :D

Jayr May 16, 2012 at 6:17 AM    

I'll try to use this on my blogger blog.

Aman Deep September 28, 2012 at 7:51 PM    

Thanks!

Gowtham October 12, 2012 at 1:18 AM    

How to display the page title instead of Older Post and Newer Post?

Greenlava October 12, 2012 at 9:14 AM    

@Gowtham Gutha
There's a post for that, here:
Replace Older & Newer post links with post titles

Unknown November 6, 2012 at 5:41 AM    

thanks buddy. replaced older, newer with images and it worked great ;)

Millennial Bella November 27, 2012 at 6:07 AM    

Thank you!! :)

Unknown December 1, 2012 at 10:13 PM    

Thank you......!

Mens Health January 30, 2013 at 8:27 PM    

Thanks for this information.

Folk You March 20, 2013 at 5:18 PM    

thks!nice for sharing!

Unknown April 24, 2013 at 12:01 PM    

I really thank you for sharing his good blog,i get a lot of important info from this...

Anmol August 28, 2013 at 12:48 PM    

amazing! Thank you for sharing this valuable info!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.