Blogger 主题的下一个和上一个按钮

Question

This might be a take a lot of time and might be a tough question to answer, but please help.

I have a blogger blog It is a blog for reading Japanese Manga.

The theme of this blog was actually published not fully developed.I downloaded it and applied it and even though I have almost completed the coding at necessary places, some problems are left out.

One of them is Next and Prev button. For temporary uses I have put data:newerPageUrl and data:olderPageUrl The above both tags are used for linking to the previous post and next post.

Since this is a manga website, I want the next button to work so that it goes till the end of the last chapter of a title of manga (under the same categories) and gives an error saying that next chapter is not yet available.

Leaving the error part out, for now all I want is for the Next button to go to Next chapter of the manga and stops at the last chapter of that manga.

The code that was already in the theme is :

<nav class='op-pagi'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<i class='fa fa-angle-left'/> Prev</a>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> Next <i class='fa fa-angle-right'/>
</a>
</nav>

Let me simplify my Idea more easily and tell you: Manga is a type of comic. These Manga's are generally categorized into different genres.
One Manga can obviously come under different genres. The genres that I mention for these mangas are like : Romance,School,Comedy,Action,Adventure and other such.
In my blog I am using these genre's as labels.

Suppose a manga has 3 chapters in them:
Chuuko demo Koi ga Shitai! Chapter 1
Chuuko demo Koi ga Shitai! Chapter 2
Chuuko demo Koi ga Shitai! Chapter 3

And suppose all the above 3 chapters come under 4 same labels like :

Romance, School, Comedy, Chuuko demo Koi ga Shitai!

Since they are the chapters of the one and same title manga Chuuko demo Koi ga Shitai!

Suppose I have 3 posts that I have posted in my blog:

Post 1:

Title : Chuuko demo Koi ga Shitai! Chapter 1

Label: Romance, School,Comedy,Chuuko demo Koi ga Shitai!

Post 2:

Title : Chuuko demo Koi ga Shitai! Chapter 2

Label: Romance, School,Comedy,Chuuko demo Koi ga Shitai!

Post 3:

Title : Dungeon Seeker Chapter 1

Label: Action, Drama, Fantasy, Dungeon Seeker

Suppose I am browsing the first post : Chuuko demo Koi ga Shitai! Chapter 1.

After reading I press the NEXT button and it goes to the next chapter Chuuko demo Koi ga Shitai! Chapter 2.

Now when I press NEXT button I don't want it to go to Dungeon Seeker Chapter 1. It will go to dungeon seeker chapter 1 since I am using data:newerPageUrl as HREF value of the NEXT button html code.
Instead I just want it to end there.

More simply :
Demonstration of what happens when I press next button :
Dungeon Seeker Chapter 1
next button : Dungeon Seeker Chapter 2
next button : Dungeon Seeker Chapter 3
next button : Dungeon Seeker Chapter 4
If no more chapters...no more next button.

Seems like when I reach the latest post NEXT button automatically gets disabled. Looks like it was preinstalled in the theme.
If you understand then, Please help by providing a code :)

Answer 1

Adding Style code

1. Search for this line in template html ]]></b:skin>

2. Now add the following code to before ]]></b:skin>

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-slide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-slide a.prev{left:0}.nav-slide a.next{right:0}.nav-slide a svg{display:block;margin:0 auto;padding:0}.nav-slide .icon-wrap{position:relative;z-index:100;display:block;padding:20px;background-color:#fff}.nav-slide svg.icon{fill:#34495e}.nav-slide div{position:absolute;top:50%;background-color:#34495e;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.nav-slide a.prev div{left:0;padding-left:86px;padding-right:10px;-webkit-transform:translateY(-50%) translateX(-100%);transform:translateY(-50%) translateX(-100%)}.nav-slide a.next div{right:0;padding-right:86px;padding-left:10px;text-align:right;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.nav-slide h3{position:relative;marg in:0;padding:20px 0;color:#fff;white-space:nowrap;font-weight:300;font-size:1.3em !important;line-height:1.5}.nav-slide div h3 span{display:block;color:#95a5a6;font-style:italic;font-size:65%;font-family:Baskerville,"Baskerville Old Face","Hoefler Text",Garamond,"Times New Roman",serif}.nav-slide a:hover div{-webkit-transform:translateY(-50%) translateX(0);transform:translateY(-50%) translateX(0)}@media screen and (max-width:520px){.nav-slide a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-slide a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-slide a{-webkit-transform:scale(0.6);transform:scale(0.6)}}

Full source code here: https://pastebin.com/frWjV4Ja