How to Make Automatic Next Prev Button Based on Labels on Blogger 2020

Nilesh    9/16/2020    widget   

The Next and Previous buttons are very useful if the blog is a blog that is used for novels. But what if you have to make it manually? It feels very tiring to have to edit the previous post again, so this is where I made this post so you don't have to re-edit the post and automatically the Next Previous link is already in the post.

There is a Webnovel Template for Bloggers! Please Check the Index

Next Prev Button Function Automatically Based on Label

Its function is to make the Next and Prev buttons appear in every post you make, if the Next Prev button is usually sequential according to the time of posting, then this button is the same but what is different is that the button only directs to posts that match the label.

How to Make Automatic Next Prev Button Based on Label

Make sure you have implemented Font Awesome and JQuery in your template, if you haven't copied the code below and paste it before the code or above the code </head>

<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 code </style>so that the next previous button doesn't appear messy.

  .pager-js {
    text-align: right;
    margin: 20px 0;
}
  .pager-js div{display:inline-block}
  .pager-js>div a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    padding: 11px 15px;
    background-color: #090e10;
    color: white;
    border-radius: 30px;
}
  .pager-js>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 you are looking for <b:includable id='post' var='post'>now add the following code on 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, you look for the code <data:post.body/>and paste the following code below it. For the word Novel itself is a label exception, so when a post is labeled Novel, the Next and Previous buttons do not appear.

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

The Next and Previous buttons don't work if there are two labels, and the post order is according to the time the post was published. The Next Previous button is not mine, I just copied it from the MegumiNovel template. Please develop it yourself. Hopefully the posting of Making Previous and Next buttons based on labels automatically on Blogger is useful for those of you who read, if there are errors, please comment below, maybe I can help. To see the demo please visit fik-exam.blogspot.com

Tag: how to create automatic next prev button based on label on blogger, next prev button based on automatic label on blogger

http://d2c9ql1qys1tqa.cloudfront.net/share_pro/share/index.html#/?extension_code=27DFNK&special_types=2&package=com.indian.superwin