Sunday, August 31, 2008

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 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 has been liberally seeded with 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.


>> Top

10 comments:

ramon the goon 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!

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

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

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

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

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

K.E.Abolfazl 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