Adding Home Older Newer Post Buttons in new Blogger templates such as Contempo

By SHIVAM KUMAR -
Requirement: Add Home, Older, Newer Post Buttons in new Blogger templates such as Contempo.

 Solution:
Hi for this jump to Blog widget in HTML editor of your template and find and replace code in includables with respective id's with the ones given below also change the order of buttons as shown below in postPagination includable as per your needs.

Code given below shows button in this order  Older Posts Home Newer Posts
Demo: Can be seen by clicking here and scrolling to end of page.
Screenshot:


 Note: First page will display only Older posts button as there is nothing to go back when we are on landing or home page and the last page will display Previous posts button and the Home button as there is nothing left to go forward.

Displays buttons in order provided here in frontend ,ID to search postPagination: 

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

Displays Home button ,ID to search homePageLink: 

<b:includable id='homePageLink'>
<b:comment>Don&#39;t show</b:comment>
<a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' style='margin:0px;'>Home</a>
</b:includable>

Displays Older Post button ,ID to search nextPageLink: 

<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>-->
<a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' title='Older Posts'>Older Posts&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;rarr;</a>
        </b:includable>

Displays Newer Post button ,ID to search previousPageLink : 

<b:includable id='previousPageLink'>
<b:comment>Don&#39;t show</b:comment>
<a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Newer Posts'>&amp;larr;&amp;nbsp;&amp;nbsp;&amp;nbsp;Newer Posts</a>
</b:includable>

Comments

Post a Comment

Note:Please be gentle while commenting and avoid spamming as comment are anyways moderated thank you.

Popular posts from this blog

Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

By SHIVAM KUMAR -
Image
Here is how to do it : Add this code in your blogger template(where to add this code is mentioned before 2nd code snippet of this post) ,now the value 1300px is the screen size for which I want the sidebar to be always visible for, you can reduce this value as you like, but be aware that reducing this value to much smaller digit will result in showing the overlapped sidebar instead of content body for your blog readers who are using much smaller screen devices such as mobiles which you might not want to happen so be wise : @media screen and (max-width: 1300px) {   .sidebar-container {     bottom: 0;     position: fixed;     top: 0;   }   .sidebar-container {     left: 0;     right: auto;   }   .sidebar-container.sidebar-invisible {     -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);             transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);   }   .sidebar-container.sidebar-invisible {     -webkit-transform: translateX($(sidebar.width * -1));         -ms-
Read more

Adding copy to clipboard button to every google code prettify pre blocks in blogger

By SHIVAM KUMAR -
Image
It's a 2 part process: The script part to find all the pre blocks having code in it and append a copy button to it dynamically. The style part to place our copy button at the specified location(on top right of every code block in this case) The script part: <script> var pre = document.getElementsByTagName('pre'); for (var i = 0; i < pre.length; i++) {             var button = document.createElement('button');                     button.className = 'copy-button';                     button.textContent = 'Copy';                     var s = pre[i].innerText;                     button.setAttribute("data-clipboard-text",s);                     pre[i].appendChild(button);        } var clipboard = new Clipboard('.copy-button'); clipboard.on('success', function(e) {     console.info('Action:', e.action);     console.info('Text:', e.text);     console.info('Trigger:', e.trigg
Read more