2

The Blogger "Notable" template's post pagination link on the bottom of the main page only shows a "More Posts" link. It's missing a "Previous Posts". It's also missing the traditional "Home" link. The "More Posts" link correctly disappears on the last page of posts.

I am looking to enable at least a "Previous Posts" link.

This appears to be intentional on the part of Google as the code includes this:

<div class='blog-pager container' id='blog-pager'> <b:include cond='data:newerPageUrl' name='previousPageLink'/> <b:include cond='data:olderPageUrl' name='nextPageLink'/> <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/></div>

But in two locations each the code includes:

<b:includable id='previousPageLink'><!-- Don't show --></b:includable>

<b:includable id='homePageLink'><!-- Don't show --></b:includable>

I attempted to fix this by first altering this line:

<a expr:href='data:blog.homepageUrl'>Home</a>

The only thing that did was the "Home" link to appear on the last page of posts where the "More Posts" previous was placed. Several other examples found online could not be tried as they refer to code that no longer exists within templates.

xxxMore Posts Linkxxx

I've also tried at least a dozen 3rd party numbered pagination coding schemes which overwrite Blogger's existing code, but those do not work correctly.

Any idea of how to fix the template to enable the links or 3rd party code that might work?

Prayag Verma
  • 5,581
  • 3
  • 30
  • 56

2 Answers2

0

You will need to replace -

<b:includable id='previousPageLink'><!-- Don't show --></b:includable>

with 

<b:includable id='previousPageLink'>
    <a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'>
        <data:messages.newerPosts/>
    </a>
</b:includable>

and replace

<b:includable id='homePageLink'><!-- Don't show --></b:includable>

with

<b:includable id='homePageLink'>
    <a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' expr:title='data:messages.home' >
        <data:messages.home/>
    </a>
</b:includable>

to show the Previous Posts (now called Newer Posts) and Home button in the page navigation. Depending on theme being used, you will need to add custom CSS to make them appear correctly

Prayag Verma
  • 5,581
  • 3
  • 30
  • 56
0

Thanks Prayag Verma! That Worked Great!

The "More Posts" link code was:

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

I decided to replace the default text for both the older and newer links. Thus I replaced <data:messages.newerPosts/> with &#8592; Previous and I replaced <data:messages.morePosts/> with Next &#8594;.

I also added a border to make them stand out more. As this button class has a -8 margin the margin needed to be reset to 0 otherwise the two buttons next to each other would overlap. A 8px margin was then added to the Next button so they would not touch.

As this template uses a sticky menu at the top the Home button at the button was unnecessary so I hid it. The default top margin on the blog-pager was too much and was thus reduced.

Chrome iPhone 5 Emulation Screenshot

The following code needed to be inserted just above the </body> tag:

<style>
.blog-pager a{
margin: 0px;
border: 1px solid #25a186;
}

.blog-pager a.blog-pager-older-link.flat-button.ripple{
margin-left: 8px;
}

.blog-pager a.home-link.flat-button.ripple{
display:none;
}

.blog-pager{
margin-top: 14px;
</style>