Bringing Newer Posts Links to Contempo on Blogger...
The new themes from Blogger, brought some new features, but, also changed some existing features. The new themes allow one to navigate to older post snippets and to the home page, but, once you've moved past the first few pages of post snippets, there is no way to get back to a previous set of post snippets, except by returning to the home page and navigating through the older post snippets again.After poking around on the Blogger Help Forum, the official advice seems to be, if you want the newer and older navigation links, then you should use a theme that provides that functionality rather than the newly released themes. Well, I really like the new themes and I wasn't willing to go back to my previous theme just for the navigation, so, after a bit of experimentation with the HTML, I came up with a solution.
To enable the newer post links in Contempo, you'll need to edit the theme HTML. As it happens, there are placeholders for both the newer post links and the previous post links. But, I'm getting a little ahead of myself. First, I temporarily changed the theme to get the legacy navigation code for the next and previous post links which would look something like the following:
<b:includable id='nextprev'>With the legacy navigation code in hand, I restored the Contempo theme and proceeded to locate the navigation placeholders. In the legacy theme, there was one placeholder for both links (nextprev). In the Contempo theme, there are two placeholders (nextPageLink and previousPageLink). These placeholders can usually be found using Theme > Edit HTML > Jump To Widget > Blog1. Below is the default navigation code for the Contempo theme:
<div class='blog-pager' id='blog-pager'>
<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>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
<data:messages.morePosts/>
</a>
</b:includable>
<b:includable id='previousPageLink'><b:comment>Don't show</b:comment></b:includable>Except for a comment, the previous page link placeholder is empty. Using the legacy code and the existing code, I cobbled together the following HTML changes. I opted to hard code the text for the links because, in the Contempo theme, the newer post link text data element was blank. The hard coded text might be an issue if the page is translated into another language, but, that's a risk that I'm willing to take.
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' title='Older Posts'>Older Posts&nbsp;&nbsp;&nbsp;&rarr;</a>
</b:includable>
<b:includable id='previousPageLink'>As always, before you decide to make changes to your theme HTML, make sure to back up everything that you think you might not want to lose. In addition, please note, if the Blogger team, makes improvements behind the scenes, you might miss out on updates if you have customized HTML.
<a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' style='margin-right: 50px' title='Newer Posts'>&larr;&nbsp;&nbsp;&nbsp;Newer Posts</a>
</b:includable>
By the way, in case you were wondering, the image for this post is a modified version of the "more deban" aka "more screen time" illustration that originally appeared on the back cover of the tenth manga volume of Sword Art Online. Of course, I changed the text on the signs that Lisbeth and Silica are holding to something more appropriate for this discussion. Enjoy.
March 16, 2020
Update
Notable-Flavored Version
After a recent visitor requested a Notable-flavored version, I decided to re-visit this solution. I created a Notable site so, I could play with without breaking my main site. My original solution had some conditional code which was no longer needed for Contempo or Notable themes, so, I removed the conditional code. With the conditional code removed, no other changes were needed.I applied the code above and it worked in the Notable theme with only a minor formatting issue. The Notable theme has some formatting which can cause the two links to be misaligned in some instances. I added an extra bit of CSS to remove margins from the previous and next links as follows. As always, add the CSS using Theme > Customize > Advanced > Add CSS:
.flat-button {
Margin: 0px;
}
Enkoy.
