2018-02-06

Display Post Titles in Blogger Page Navigation

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.

  1. Getting page titles from the blog feeds without loading another page.
    Loading another page is counted as a page visit and skew the stats.
  2. 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'>
//<![CDATA[
// except root, labels, search and mobile pages
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, '', ' &#187;')
    };
  }
  var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
  if (newerLink) {
    getPageTitle(newerLink, setNewerPageTitle);
    function setNewerPageTitle(data){
      setPageTitle(data, newerLink, '&#171; ', '')
    };
  }
  // set the page title from feed data
  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;
    }
  }
  // get entry data from the feed
  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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      <b:else/>&#160;
    </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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      <b:else/>&#160;
    </b:if>
    </span>
  • &#160; is &nbsp;, because Blogger’s editor cannot accept some entity references like &nbsp;.

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.

5 comments:

  1. Thank you for the code. Is there any way I can extract images? I mean I want to show next/prev title along with their featured image.

    Thank you.

    ReplyDelete
  2. Thanks for comment, Aman. I think you cannot get images through Blogger API. So, the only way would be to create Javascript which extract images from the URL of next/priv page. Maybe a little complicated.

    ReplyDelete
    Replies
    1. Hey, Thanks for the reply. I found this simple way to display images on next/prev pager. If possible, please link this article to yours: https://www.twistblogg.com/2022/10/add-nextprevious-pager-navigation-with.html

      Delete
    2. Thank you, Aman. Your article is great. Sorry, I didn't know about media$thumbnail.url. I have added a link.

      Delete