The Pagination

 Following some help from the Not generating previous next links in Blogger thread at the Blogger Help Blogger Community forum, I have modified what I have in my theme to be as follows:

Modified the includable postPagination to show newer posts link and home link:


                   <b:includable id='postPagination'>
      <b:tag class='blog-pager' id='blog-pager' name='div'>
        <b:if cond='data:newerPageUrl'>
<a class='pager-button newer' expr:href='data:newerPageUrl' rel='nofollow'>&lt;&lt; 
          <b:include name='prevPageText'/>
</a>
         </b:if>
&#160; &#160;
       <b:if cond='data:view.url != data:blog.homepageUrl'>
<a class='pager-button home' expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a>&#160; &#160;
        </b:if>
        <b:if cond='data:olderPageUrl'>
<a class='pager-button older' expr:href='data:olderPageUrl' rel='nofollow'>
          <b:include name='nextPageText'/>
 &gt;&gt;</a>
        </b:if>
      </b:tag>
    </b:includable>
                    <b:includable id='prevPageText'>
      <b:if cond='data:view.isSingleItem'>
        Next Post
      <b:else/>
        <data:messages.newerPosts/>
      </b:if>
    </b:includable>
                    <b:includable id='nextPageText'>
      <b:if cond='data:view.isSingleItem'>
        Previous Post
      <b:else/>
        <data:messages.olderPosts/>
      </b:if>
    </b:includable>


To make older post, newer post, and home links for individual post pages:

in Blog1 widget, in <b:includable id='main'> just after <b:include name='super.main'/>, put



<b:include cond='data:view.isPost' name='postPagination'/>


The CSS:



#blog-pager {
  position: relative;
  height: 1em;
  width: 80%;
  margin: 2em auto;
}
#blog-pager a {
  display: block;
}
#blog-pager a.home {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
#blog-pager a.newer {
  float: left;
}
#blog-pager a.older {
  float: right;
}


The CSS is complicated because I wanted to keep the home link centered regardless of whether there is a previous or next to the sides. With the width spread out it would shift and look out of balance. Note: At less than 80% it breaks the line on a cell phone.


 

Comments