Skip to main content

Customising The Newer Post - Older Posts Captions

Not everybody who like Layouts templates, and their flexibility, likes the "Newer Posts" / "Older Posts" links. Some people are content to just remove them, but others would like to change the captions.

The latter task isn't terribly difficult. As always, backup your template before and after making these changes.

The simplest changes that you can make involve editing the CSS rules that control the fonts.
  • You can change all 3 links together. The "Newer Posts" - "Home" - "Older Posts" container uses the Class rule "blog-pager".
  • Alternately, you can change each link separately.
    • "Newer Posts" uses the Class rule "blog-pager-newer-link".
    • "Home" uses the Class rule "home-link".
    • "Older Posts" uses the Class rule "blog-pager-older-link".

Here is the CSS rule set for a Minima / Simple template.


#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}


Make the "Home" link bold.


#home-link {
font-weight:bold;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}


Make all three links bold.


#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
font-weight:bold;
text-align: center;
}



If you want to change the link captions, or maybe replace the captions with pictures, you'll have to edit the template XML. This is slightly more work than tweaking the CSS rules.

From the Template Editor, expand the post template, aka "Blog1". Look through the code for "nextprev". (Note): What you see below contains gratuitous line breaks, to prevent post / sidebar alignment problems.



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



Change that. Here, we'll change "Newer Posts" to "Next", and "Older Posts" to "Prev".



<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</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'>
Prev</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, we'll change "Newer Posts" to a left arrow, and "Older Posts" to a right arrow.



<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://3.bp.blogspot.com/_pzC_7PLtN-0/
SLspRekw94I/AAAAAAAABO0/xBrN8YSo-Vc/s200/
Left.gif'/>
</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'>
<img src='http://4.bp.blogspot.com/_pzC_7PLtN-0/
SLspRqEA42I/AAAAAAAABO8/yuwkwz-8Tr4/s200/
Right.gif'/>
</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, we'll change "Home" to "My Home Page".



<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
My Home Page
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
My Home Page
</a>
</b:if>
</b:if>



And Save, which ever change you make. See it in action, if you like.

(Note): The "Newer Posts" / "Older Posts" links are only available in blogs with layouts templates, because they require XML. If your blog uses a classic template, this is an excellent opportunity for you to consider upgrading to a layouts template. If you insist on using HTML for the template, upgrade to layouts anyway - then use your HTML in the layouts body.

And please, backup the template - before and after making these changes.

Comments

Anonymous said…
thanks for this post, it was really helpfull for me
Alex Lai said…
Thanks for the answer. It was really helpful but is there a way to change the font of these links? Also, what about the "Home" link at last page of the website?

Thank you!
Nitecruzr said…
The font can be changed, you'll jus need a CSS rule for "blog-pager". The "Home" link is there, on each page.
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
cheth said…
@Chuck
Need some urgent help. for some reason i messed up my codes and my older posts links the ones you mentioned in this post isnt working..

tried all tricks in the book including the above mentioned post. Any help? if there is no way can i ask you if i can put it within a widget?
Email said…
THANK YOU>>>THANK YOU....REALLY HELPED ME!!! LOVE YOU come see it at work...http://peoplefailing.blogspot.com
Felicia said…
Hi, I'm hoping you can help me. I customized my blog by changing the colors and adding pictures and links to the sidebar, but somehow the links to older posts and newer posts got deleted. Now my readers have no way to get to older posts. I tried reading about how to get these buttons or links back, but I don't have the links the article said to click on...is there a way to get older posts and new posts links on my footer?

http://aquariumadventures.blogspot.com/
Nitecruzr said…
Felicia,

Your blog has a classic (HTML) template, so you're going to want to add the codes into the classic template.
Felicia said…
aha! ok, thanks. I tried copying and pasting some of the above codes into the template, but they didn't work. I am not sure where they are supposed to go. I put them under the footer section at the bottom.
Nitecruzr said…
Felicia,

Adding the code, into a classic template, in the right place, was not easy. Did you read my tutorial? Might I suggest that we continue this conversation in Blogger Help Forum: How Do I?, where we can conduct an actual dialogue much easier?
Mehrs... said…
Hi dear Admin one of the best site i've ever seen for blogger tanx.
i have question? i currently use minimia template for my blog but my newer and older and home links are missing i dont know what's wrong!
i find some way to visible thoes links but nothing has been changed!!!
if possible help me i really apreciate about your kind in advance
i am follow up and awaitng for ur response

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".