How To Modify Or Take The Newer Post Service Too Older Posts Links

This article explains how to enshroud or alter the format of the "Older Posts" together with "Newer Post" together with "Home" links that are shown at the bottom of Blogger blogs with Layout or Designer themes.

Why are the older together with newer posts links used

Most designer together with layout themes have links at the bottom of your page of weblog posts which allow readers navigate dorsum together with forwards alongside the listing of posts.

This is basic to how a weblog is intended to work:  you post service regularly, together with give people a agency to buy the farm dorsum to previous posts.

The pager-links are peculiarly of import on pages that are reached using the Label or Archive gadgets, which may demo to a greater extent than posts than y'all unremarkably direct hold on your habitation page, or displaying inward your blog.

But some people desire to take them - together with this is fine provided readers direct hold other ways of navigating to a greater extent than or less the blog.

How to take "Newer Posts" together with "Older Posts" from your blog

To totally take these items, y'all simply add some novel CSS rules to your template inward the usual way.

To take "Older Posts" add:

#blog-pager-older-link {
float: right;
}

To take "Newer Posts" add:

#blog-pager-older-link {
float: right;
}

Or to take both of them together with the "Home" link that appears inward betwixt them, add:

#blog-pager {
display: none;
}

How to format the "Newer Posts" together with "Older Posts"

Changing the agency that these links await is really similar, y'all simply add together the same codes, except instead of 

display: none;

y'all necessitate to use the CSS chemical element for the number y'all want.   For example, to brand the text bigger together with bold, y'all powerfulness purpose rules like

font-size: 150%;
font-weight: bold;

You necessitate to position these commands within the curly brackets, where the display: none; is at in 1 trial - brand certain that each cistron has a semi-colon at the terminate of it.   It makes the code easier to read if each cistron is on a novel line, but this isn't necessary.

Another alternative is to swap the "float" commands to a greater extent than or less to put "older posts" on the left together with "newer posts" on the right (I've never quite understood why they were the other agency around).

You tin dismiss also use background images together with colours, with elements like:

background-image:url('URL OF YOUR IMAGE');

background-color:#cccccc;

How to alter the "Newer Posts" together with "Older Posts" text

If y'all desire to alter the text values - either to dissimilar words, or past times replacing them totally with pictures, y'all necessitate to accept the disadvantages of editing your theme.   If this is ok, together with y'all you desire to maintain then:

1  Edit your theme in the usual way

two  Replace the existing links:

• To supersede the "newer posts" link, find <data:newerPageTitle/>  in your theme, together with supersede it with whatsoever text y'all want.
  
• To supersede the "older posts" link, find <data:olderPageTitle/>  in your theme, together with supersede it with whatsoever text y'all want.
  
• To supersede the "home" link, find <data:homeMsg/>  in your theme, together with supersede it with whatsoever text y'all want.   

In each case, the code y'all are replacing volition move within another code, similar this:

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

Make certain that y'all only supersede precisely the code listed above, including the < together with >'s.   The other code to a greater extent than or less sets upward the links to the actual older or newer posts, together with y'all don't desire to alter this.

Also, if y'all desire to purpose a painting demo instead, supersede it with <img alt='...' border='0' src='THE URL OF YOUR PICTURE'/> - of course of report with the right painting demo URL position in.

Do brand certain that the pregnant of your pictures is obvious though - what may await similar a cute "newer posts" symbol to y'all powerfulness move totally meaningless to soul else.

---

Related Articles

How to add together a CSS dominion to your theme

How to edit your blogger theme

Understand the advantages together with disadvantages of topic editing

Finding the URL of a painting demo inward Picasa-web-albums

Understanding designer together with layout theme

Share this post