How to Create Automatic Next/Prev Buttons Based on Labels in Blogger

Next and Previous buttons are very useful if the blog is used for Novels. But what if you have to create them manually? It feels very tiring to have to edit the previous post again, so this is why I created this post so that you don’t have to create posts again and the Next/Previous links are already in the post.

Function

Its function is to make the Next and Previous buttons appear in every post you create. If the Next and Previous buttons are usually in chronological order according to the posting time, then these buttons are also the same, but the difference is that these buttons only direct to posts that match the label.

How to Create

Make sure you have Font Awesome and JQuery applied to your template. If not, copy the code below and paste it before or above the </head> tag.

<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js/">

Paste the following code above the </style> tag so that the next button’s appearance is not messy.

  .pager-js {
    text-align: right;
    margin: 20px 0;
}
  .pager-js div{display:inline-block}
  .pager-js&gt;div a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    padding: 11px 15px;
    background-color: #090e10;
    color: white;
    border-radius: 30px;
}
  .pager-js&gt;div a:hover {
    box-shadow: 2px 3px 9px 0 rgba(0,0,0,0.2);
}
  .pager-js .pager-js-nolink{text-decoration:line-through;cursor:not-allowed}
  .pager-js-nolink{display:none;}
  #blog-pager, #blog-pager-older-link, #blog-pager-newer-link, .home-link {
      display:none;
  }

After that, find <b:includable id='post' var='post'> and add the following code above it.


  <b:includable id='pager_chapter' var='type'>
    <b:if expr:cond='data:post.labels any (l =&gt; l.name != data:type.name)'><script type='text/javascript'>var selectchap = false;</script></b:if>
    <b:if expr:cond='data:post.labels any (l =&gt; l.name == data:type.name)'><script type='text/javascript'>var selectchap = true;</script></b:if>
    <b:loop index='i' values='data:post.labels' var='label'>
    <b:if cond='data:i == 0'>
        <div class='pager-js' id='pager-js'>
         <div class='_prev' id='prevjs'><a class='pager-js-nolink'><i class='far fa-caret-square-left'/></a></div>
         <div class='_index' id='indexjs'><a class='pager-js-nolink'><i class='far fa-list-alt'/></a></div>
         <div class='_next' id='nextjs'><a class='pager-js-nolink'><i class='far fa-caret-square-right'/></a></div>
        </div>
  <script type='text/javascript'>
  var postPrev = &quot;<i class='fas fa-arrow-alt-circle-left'/>&quot;;
  var postNext = &quot;<i class='fas fa-arrow-alt-circle-right'/>&quot;;
  var postIndex = &quot;<i class='fas fa-list-ul'/>&quot;;
  var postID = <data:post.id/>;
  /*<![CDATA[*/
  if(selectchap==false){var yktocs=function(data){var i=0;for(;i<data.feed.entry.length;i++){var j=0;for(;j<data.feed.entry[i].link.length;j++){if("alternate"==data.feed.entry[i].link[j].rel){var entityUrl=data.feed.entry[i].link[j].href;break}}document.getElementById("indexjs").innerHTML="<a href='"+entityUrl+"' title='Index Novel'>"+postIndex+"</a>"}};var ykpager=function(data){var node={postlist:[]};var i=0;for(;i<data.feed.entry.length;i++){var j=0;for(;j<data.feed.entry[i].link.length;j++){if("alternate"==data.feed.entry[i].link[j].rel){var murl=data.feed.entry[i].link[j].href;break}}var videoId=data.feed.entry[i].id.$t;var CAPTURE_ID=videoId.substr(51,19);node.postlist.push({url:murl,id:CAPTURE_ID})}var v=node.postlist.findIndex((timeline_mode)=>{return timeline_mode.id==postID});var id=v+1;var cbs=node.postlist[id];if(null!=cbs){var g=Object.values(cbs)[0];var lnkDiv=document.getElementById("prevjs");lnkDiv.innerHTML="<a href='"+g+"' title='Chapter Sebelumnya'>"+postPrev+"</a>"}var q=v-1;var val=node.postlist[q];if(null!=val){var k=Object.values(val)[0];lnkDiv=document.getElementById("nextjs");lnkDiv.innerHTML="<a href='"+k+"' title='Chapter Selanjutnya'>"+postNext+"</a>"}}}else{document.write("<style>.pager-js{display:none;}</style>")};
  /*]]>*/</script>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&amp;max-results=999999&quot;' type='text/javascript'/>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:type.name + &quot;/&quot; + data:label.name + &quot;?orderby=published&amp;alt=json-in-script&amp;callback=yktocs&amp;max-results=1&quot;' type='text/javascript'/>
  </b:if>
  </b:loop>
  </b:includable>

Next, find the <data:post.body/> code and paste the following code below it. The word “Novel” itself is a label, so when a post is labeled “Novel”, the Next and Previous buttons will not appear.

<b:include data='{name : &quot;Novel&quot;}' name='pager_chapter'/>

The Next and Previous buttons do not work if there are two labels, and the post order is according to the posting time. The Next/Previous buttons are not my creation; I only copied them from the MegumiNovel template. Please develop it yourself. Hopefully, this post Creating Automatic Next and Previous Buttons Based on Labels in Blogger is useful for you who are reading. If there are any errors, please comment below, maybe I can help. To see a demo, please visit fik-exam.blogspot.com

Tag: how to create automatic next prev buttons based on labels in blogger, automatic next prev buttons based on labels in blogger

Menu

Function

How to Create