How to change or remove the Newer Post and Older Posts links

<div style="text-align: left;"><strong>This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links that are shown at the b</strong><strong>ottom of Blogger blogs with Layout or Designer themes.</strong></div><br /><br /><div style="clear: both;"></div><a name="more"></a><h2>Why are the older and newer posts links used</h2><div style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlq0CMQP_od2GoftAX5Fgkq6NwHQsf7d6dX1DeSPzderQIa5zDZ4IKu9RI77R0uSWFmOPlTCuNmLlOEUxlRPlO7dLdQHjpgX-UjtWGcIzrIfP5PaD8J0DdnWdL7_yosAfmgmkTEmOlxxi/s357/remove-older-posts-newer-posts-pager-links-from-blogger-templates.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlq0CMQP_od2GoftAX5Fgkq6NwHQsf7d6dX1DeSPzderQIa5zDZ4IKu9RI77R0uSWFmOPlTCuNmLlOEUxlRPlO7dLdQHjpgX-UjtWGcIzrIfP5PaD8J0DdnWdL7_yosAfmgmkTEmOlxxi/s200/remove-older-posts-newer-posts-pager-links-from-blogger-templates.png" width="250" /></a></div>Most <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">designer and layout themes</a> have links at the bottom of your page of blog posts which let readers navigate back and forward among the list of posts. <br /><br />This is basic to how a blog is intended to work:  you post regularly, and give people a way to get back to previous posts. <br /><br />The pager-links are particularly important on pages that are reached using the Label or Archive gadgets, which may show more posts than you normally have on your home page, or displaying in your blog.<br /><br />But some people want to remove them - and this is fine provided readers have other ways of navigating around the blog.</div><br /><br /><h2>How to remove "Newer Posts" and "Older Posts" from your blog</h2><div>To totally remove these items, you just <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">add some new CSS rules to your template</a> in the usual way.</div><div><br /></div><div>To remove <b>"Older Posts"</b> add:</div><blockquote class="tr_bq">#blog-pager-older-link {<br />float: right;<br />}</blockquote><br /><div><div>To remove <b>"Newer Posts"</b> add:</div><blockquote class="tr_bq">#blog-pager-older-link {<br />float: right;<br />}</blockquote></div><div><br /></div><div>Or to remove <b>both of them and the "Home" link</b> that appears in between them, add:</div><blockquote class="tr_bq">#blog-pager {<br />display: none;<br />}</blockquote><div><br /></div><div><h2>How to format the "Newer Posts" and "Older Posts"</h2></div><div>Changing the way that these links look is very similar, you just add the same codes, except instead of </div><blockquote class="tr_bq">display: none;</blockquote><div>you need to <b>use the CSS element for the effect you want</b>.   For example, to make the text bigger and bold, you might use rules like</div><blockquote class="tr_bq">font-size: 150%;<br />font-weight: bold; </blockquote><br />You need to put these commands inside the curly brackets, where the <u>display: none;</u> is now - make sure that each component has a semi-colon at the end of it.   It makes the code easier to read if each component is on a new line, but this isn't necessary.<br /><br />Another option is to swap the "float" commands around to <b>put "older posts" on the left and "newer posts" on the right</b> (I've never quite understood why they were the other way around).<br /><div><br /><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="http://upload.wikimedia.org/wikipedia/commons/b/b7/P_weather.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://upload.wikimedia.org/wikipedia/commons/b/b7/P_weather.png" width="200" /></a></div>You can also <b>use background images and colours</b>, with elements like:</div><blockquote class="tr_bq"><span style="background-color: white; font-family: "courier new"; font-size: 13px;">background-image:url('URL OF YOUR IMAGE');</span></blockquote><blockquote class="tr_bq"><span style="background-color: white; font-family: "courier new"; font-size: 13px;">background-color:#cccccc;</span></blockquote><div class="separator" style="clear: both;"></div><br /><h2>How to change the "Newer Posts" and "Older Posts" text</h2><br />If you want to change the text values - either to different words, or by replacing them totally with pictures, you need to <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">accept the disadvantages of editing your theme</a>.   If this is ok, and you you want to proceed then: <br /><br /><div style="text-align: left;">1  <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">Edit your theme</a> in the usual way</div><div style="text-align: left;"><br /></div><div style="text-align: left;">2  Replace the existing links:</div><div style="text-align: left;"><ul><li>To replace the <b>"newer posts" link</b>, find <data:newerPageTitle/>  in your theme, and replace it with whatever text you want. <br /></li><li>To replace the <b>"older posts" link</b>, find <data:olderPageTitle/>  in your theme, and replace it with whatever text you want. <br /></li><li>To replace the <b>"home" link</b>, find <data:homeMsg/>  in your theme, and replace it with whatever text you want.   </li></ul><br /><br />In each case, the code you are replacing will be inside some other code, like this:<br /><blockquote class="tr_bq"><i>  <span id='blog-pager-newer-link'><br />      <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'><b><data:newerPageTitle/></b></a><br />      </span></i></blockquote>Make sure that you <b>only replace exactly the code listed above, including the < and >'s</b>.   The other code around sets up the links to the actual older or newer posts, and you don't want to change this.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://upload.wikimedia.org/wikipedia/commons/7/7c/P_meteorology.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://upload.wikimedia.org/wikipedia/commons/7/7c/P_meteorology.png" width="200" /></a></div>Also, if you want to use a picture instead, replace it with <b><img alt='...' border='0' src='THE URL OF YOUR PICTURE'/> </b>- of course with the <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/finding-pictures-location-url-in-picasa.html">right picture URL</a> put in. <br /><br />Do make sure that the meaning of your pictures is obvious though - what may look like a cute "newer posts" symbol to you might be totally meaningless to someone else.</div><div class="separator" style="clear: both;"></div><br /><br /><hr style="margin-left: 0px; margin-right: auto;" /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">How to add a CSS rule to your theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">How to edit your blogger theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Understand the advantages and disadvantages of theme editing</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/finding-pictures-location-url-in-picasa.html">Finding the URL of a picture in Picasa-web-albums</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Understanding designer and layout theme</a>

How to change or remove the Newer Post and Older Posts links

This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links ...

Read more »