Recently Brent, owner of The Right Brain asked how he could change the ubiquitous “Older Posts” at the bottom of Blogger pages. Actually there are two types of links.
- When you’re on a page with multiple posts, then “Older Posts” returns the next set of multiple posts. Older means those with earlier publish dates. Similarly, “Newer Posts” would return a set of post with more recent publish dates.
- On a single page, “Older Post” goes to the previous post chronologically. “Newer Post” shows the next in line with a later calendar date.
Seems logical to word these links in more commonly used navigational terms like “Prev” and “Next”. Or if you want to get real fancy, use special arrow characters like these:
? prev Home next ?
Blogger defines lots of data variables that find their way into the template. We take most of these for granted and go our merry way. But for those of you who want to customize your blogs, knowing the data tag lets you substitute your own text or other html code. These are the three tags that display page navigation:
<data:newerPageTitle/> Newer post links text.
<data:olderPageTitle/> Older posts link text.
<data:HomeMsg/> Home Page link text
Getting it Done:
Simply put, you are going to edit the template, find the three data tags that control what text is displayed and substitute the entire tag with text words of your choice.
- Go to the Dashboard, Layout, Edit HTML tab. Backup your template.
- Check the ‘expand widget’ box.
- Do a search (Ctrl + F) for the tag you want, highlight it and key the text you prefer.
e.g. To change ‘older posts’
find <data:olderPageTitle/> and key Prev or Prevous instead.
- Do the same for the Next text link
find <data:newerPageTitle/> and key Next instead.
- Preview each change to make sure you don’t have a typo. You can only see the homepage in the preview. The idea is to test for script errors. Save the template.
To use an icon, make sure you have the full url for the image. Find an icon like this one and put in on your blog’s image file.
This is the image tag you would use to replace the entire <data:HomeMsg/> tag with the above icon:
<img alt=’Home’ border=’0′ src=’http://bpwebnews.com/wp-content/uploads/2010/01/home-icon.png’ title=’Home’/>
Be sure to use single quotes within the icon tags! Give it a try!
NOTE: you may not be able to leave a comment just yet — I switched from JS-Kit Echo to Intense Debate and there’s a glitch right now. More on the conversion later…