4.5 654

How To Make Navigation Next And Prev With The Same Label

Posted by zerochan on September 6, 2018

Loading the translation ...

Yuukithemes – A few days ago I received a pagination / navigation feature request next and prev link with the same label from Robert Kay Ikari on the meguminovel theme post. honestly when making this feature I was a little stressed out about the method for making the pagination.. ha ha ha ha..

Navigation next chapter and prev chapter with the same label is installed in a blog post that is very useful for visitors when he is reading a particular manga / novel chapter.

The next and prev pagination with the same label has some shortcomings, one of which is a bit heavy because js will download all posts with the same label. I’ve updated the pagination script, which using javascript defer. so as not to make the blog heavier.

How To Make Pagination Next And Prev Chapter With The Same Label On The Manga/Novel Blog

auto navigation with same label, next prev chapter manga, yuukithemes, navigation, pagination

How To Install Navigation With Same Label In Blogger Theme

1. Login to your Blogger Dashboard
2. Choose your blog
3. Click Menu Theme
4. Click Button Edit HTML
5. Look for the <b:includable id='nextprev'> code, then copy the code below and paste it right above the <b:includable id='nextprev'> code (use CTRL + F in editor)

<b:includable id='pager_chapter' var='type'>
<style type='text/css'>
/* pager js */
.pager-js>div{display:inline-block;border:1px solid #ddd;padding:4px 20px;border-radius:3px;}
.pager-js>div a{color:#333;}
.pager-js>div a:hover{color:#264e86;}
.pager-js>._index{margin:0 6px}
#pager-js-clone{margin:15px auto 0}
<b:if expr:cond='data:post.labels any (label => label.name != data:type.name)'><script type='text/javascript'>var selectchap = false;</script></b:if>
<b:if expr:cond='data:post.labels any (label => label.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='_next' id='nextjs'><a class='pager-js-nolink'>Next</a></div>
<div class='_index' id='indexjs'><a class='pager-js-nolink'>Index</a></div>
<div class='_prev' id='prevjs'><a class='pager-js-nolink'>Prev</a></div>
<script type='text/javascript'>
var postPrev = "Prev";
var postNext = "Next";
var postIndex = "Index";
var postID = <data:post.id/>;
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+"'>"+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+"'>"+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+"'>"+postNext+"</a>"}}}else{document.write("<style>.pager-js{display:none;}</style>")};
<script defer='' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=ykpager"' type='text/javascript'/>
<script defer='' expr:src='"/feeds/posts/summary/-/" + data:type.name + "/" + data:label.name + "?orderby=published&alt=json-in-script&callback=yktocs&max-results=1"' type='text/javascript'/>
yuukithemes, navigation, pagination
6. Search for the <data:post.body/> code
7. Then paste the code below right above the <data:post.body/> code

<b:include cond='data:view.isPost' data='{name : "Novel"}' name='pager_chapter'/>
Replace “Novel” code with your label with the name of your blog type label. (eg. “Manga” for blog type manga)

8. Click Save Theme

The tutorial above only display pagination under the title, if you want to show pagination at the end of the post content too, please follow the tutorial below.

Make Two Pagination / Duplicate

1. Find Code <data:post.body/> in Editor HTML
2. Copy the code below and paste it right below the <data:post.body/> code

<b:if cond='data:view.isPost'><div id='pager-js-clone'/></b:if>

yuukithemes, navigation blogger, pagination blogger
3. Find Code </body> in Editor HTML
4. Copy the code below and paste it right above the </body> code

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
/* Clone Pager
* @https://bit.ly/2LCE7Tl
var itm=document.getElementById("pager-js"),cln=itm.cloneNode(!0);document.getElementById("pager-js-clone").appendChild(cln);

5. Click Save Theme

Example of label name format in post
yuukithemes, navigation, pagination


I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com/
– https://www.danlogs.com/2013/09/blogger-json-feed-api

Related Post


Waiting Load Disqus Comments ...