Blogger’s page navigation at the bottom of the page displays just “Newer Post” and “Older Post”. It is preferable to show the actual page title instead of them.
I’d searched solutions satisfying the following conditions.
- Getting page titles from the blog feeds without loading another page.
Loading another page is counted as a page visit and skew the stats.
- Simple JavaScript snippet (w/o jQuery as possible).
I want to just overwrite link text by the information of link destination. It should be simple.
Firstly, I found MS-potilas’ post.
It seems nice, but somewhat in a roundabout way, it extracts page titles using publishing dates.
Next, I investigate about the Blogger’s feed specification, and I found that the blog feeds are provided by the Blogger Data API.
Blogger Data API supports “retrieving a post by its path”, so we can get a post information including title by specifying path parameter.
Then, I could write a simple JavaScript (w/o jQuery), which rewrite the link text, Newer / Older Post, to their own title.
JavaScript
Insert this snippet just before </body> in Edit HTML.
<script type='text/javascript'>
if (/.+\.html(\?m=0)?$/.test(location.href)) {
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if (olderLink) {
getPageTitle(olderLink, setOlderPageTitle);
function setOlderPageTitle(data){
setPageTitle(data, olderLink, '', ' »')
};
}
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if (newerLink) {
getPageTitle(newerLink, setNewerPageTitle);
function setNewerPageTitle(data){
setPageTitle(data, newerLink, '« ', '')
};
}
function setPageTitle(data, pageLink, prefix, suffix) {
if (data.feed.entry) {
if (data.feed.entry.length > 0) {
var title = data.feed.entry[0].title.$t;
}
}
if (title) {
pageLink.innerHTML = prefix + title + suffix;
}
}
function getPageTitle(pageLink, callback) {
var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
var script = document.createElement('script');
script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path='+pathname+'&callback='+callback.name+'';
document.body.appendChild(script);
}
}
</script>
CSS
To improve the appearance, add CSS as follows. Please modify as you like.
#blog-pager {
font-size: 90%;
}
#blog-pager-newer-link {
float: left;
width: 40%;
text-align: left;
}
#blog-pager-older-link {
float: right;
width: 40%;
text-align: right;
}
Adjustment
After adding the above CSS, you may find the text “Home” not at the center of the page navigation in the home or the latest post page. It is because the latest page doesn’t have the element with #blog-pager-newer-link.
Goto Edit HTML and find
<div class='blog-pager' id='blog-pager'>
and
<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>
You can see <span id='blog-pager-newer-link'></span> is inside <b:if cond='data:newerPageUrl'></b:if>.
The latest (newest) page cannot have a link to a newer page, so the page doesn’t have <span id='blog-pager-newer-link'>. The same goes in the “oldest” case.
Overwrite it as follows:
<span id='blog-pager-newer-link'>
<b:if cond='data:newerPageUrl'>
<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>
<b:else/> 
</b:if>
</span>
<span id='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<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>
<b:else/> 
</b:if>
</span>
  is , because Blogger’s editor cannot accept some entity references like .
Then, both <span id='blog-pager-newer-link'> and <span id='blog-pager-older-link'> come to appear in any pages.
FYI:
- This article is introducing how to add images to page navigation, and well-organized.
Add Next/Previous Pager Navigation with Image - Blogger - TwistBlogg - Premium Blogger Tutorials and Widgets
A simple guide on how to add older previous pager or next prev blog pager in new blogger layout. We also shared stylish version that displays image.
yabtb.blogspot.com
