How to change the "Older post" marker in your blogger template

This post is an answer to a question posted on Blogcatalog group "Blogger"
Here is the question posted by Jules66 (or Julie-Anne):

I am wanting to change the 'older posts' link on the bottom of my blogs, to say 'next page' instead.

Does anyone know how I can do it without losing all my stuff on my blog ?

I did quick google for an answer but the sites that say how to do it, don't apply to my style blog.

Thank you in advance for your help

I am not an expert, and just explaining the way that I understand that you could do it. If there is a better way, you are most welcome to let me know. I also certainly don't take any responsibilty for any loss or damage to your blog. You follow my advice at your own risk. I did try it out on a couple of blogs of mine. I have one blog that I use for just that (trying things out.) I will not give you the URL. It is just a muck around blog. But I also did it with text for Desert Dad which is my 'show off my kids blog.'

1. First of all, I don't want to be bias towards a specific browser, but for this purpose I just love using Mozilla. Chrome seems to muck it up, and I am not a big Internet Explorer fan. I am going to explain following myself along in Mozilla. I am sure if you use a different browser it shouldn't be to tricky to figure out what works differently. It shouldn't be much


2. Open your blogger dashboard, and log in.


3. If you have more than one blog, choose which one you would like to edit, and click on "layout"


4. When the "Blogger: Edit Layout" page is up, right click on the "View Blog" link and click "Open Link in new Tab". Each time you want to see how you are doing, you can just re-load that page, and just leave your editing page alone. It's just the way I like to work.


5. Now, go to where it says "Edit HTML". If you are new to fiddling around in there, perhaps I should point out a couple things. First of all, you can click "Download Full Template". This way, if you really stuff things up, you can just re-load what you had before. If you are really worried about this, perhaps read a little about it in blogger help. The second thing is the "Clear Edits" link at the bottom. This is like a reset button before you have saved your changes. If you think it's just not going well, hit the "Clear Edits" and things go back to how they were when you last saved.


6. Now click "Expand Widget Template" and let it re-load.


7. No comes the trick. You need to find this code
   
   

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

   
   


8. If you know much about html you will know that a link has three parts, and this bit is just the same. The first bit:
   

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

   
   and the last bit:
   

   
   </a>
   

   
   surround the bit in the middle:
   

   
   <data:olderPageTitle/>
   

   
   


9. Now, that bit <data:olderPageTitle/> is a reference in xml to what should be placed there. But you can just remove the reference and put anything you want there. For example, if you wanted to use "next page" you could do this:
   

   
   
   <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'><p>Next Page</p></a>
   

   
   All you have done is slip the <p>Next Page</p> code into that link.
   


10. There are different ways that you could play with that. You could empasis it by changing the p tag to strong
    

    
    <strong>Next Page</strong>
    

    
    Or you could use an image like this one:
    

    

    
    I am not going to go into details now, but I would be happy to if you are interested. You need to do something like this: Upload the image to your Picasa web album, get the URL (where it is just the image, not a page it's on.) You will need to put it into the right code:
    

    <img src="theImageURL">

    
    and you then need to go to a site like Blogcrowds parse html page and change the code before pasting that into the same place you put the other code explained above.


11. 
    Now you need to save it. In the separate page you opened at the beginning, just click 'refresh' and if it worked fine, it should show you the new text in place of the "Older Post"
    

If you would like to use the image above, you are most welcome. For a link back to this site I would make an even nicer one, based on the colors of your blog. Just save it as an image on your computer, don't just use the linked URL.

I did find a good post about covering this. I just wanted to check that I was not going to blow up your blog. Check out Blogspottutorial


Hey, if you found this blog and you are not Julie-Anne, you may want to check out her blogs:
Chatterblog
and
Images by Julie-Anne