Blogger主题的下一个和上一个按钮 [英] Next and Prev Buttons for Blogger Theme

问题描述

这可能需要花费很多时间，而且可能是一个难以回答的问题，但请提供帮助。

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

我有一个博客 http://rawmangaread.blogspot.in/
这是一个阅读日本漫画的博客。

I have a blog http://rawmangaread.blogspot.in/ 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.

其中一个是Next和Prev按钮。对于临时用途，我已将数据：newerPageUrl 和数据：olderPageUrl
以上两个标记用于链接到上一篇文章和下一篇文章。

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.

主题中已有的代码是：

<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>

让我更轻松地简化我的想法并告诉你：
漫画是一种漫画。
这些漫画通常分为不同的类型。

One漫画显然可以有不同的类型。
我为这些漫画提到的类型如：浪漫，学校，喜剧，动作，冒险等等。

在我的博客中，我使用这些类型作为标签。

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.

假设一个漫画有3个章节：

Chuuko演示锦鲤ga Shitai！第1章

Chuuko演示Koi ga Shitai！第2章

Chuuko演示Koi ga Shitai！第3章

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

并且假设以上所有3章都有4个相同的标签，如：

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

浪漫，学校，喜剧，Chuuko演示Koi ga Shitai！

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

因为它们是同一个标题漫画的章节 Chuuko演示Koi ga Shitai！

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

假设我在我的博客中发布了3篇帖子：

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

帖子1：

标题：Chuuko演示锦鲤ga Shitai！第1章

Post 1:

Title : Chuuko demo Koi ga Shitai! Chapter 1

标签：浪漫，学校，喜剧，Chuuko演示Koi ga Shitai！

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

帖子2：

标题：Chuuko演示锦鲤ga Shitai！第2章

Post 2:

Title : Chuuko demo Koi ga Shitai! Chapter 2

标签：浪漫，学校，喜剧，Chuuko演示Koi ga Shitai！

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

帖子3：

标题：Dungeon Seeker第1章

Post 3:

Title : Dungeon Seeker Chapter 1

标签：动作，戏剧，幻想，地下城寻找者

Label: Action, Drama, Fantasy, Dungeon Seeker

假设我我正在浏览第一篇文章：Chuuko演示锦鲤ga Shitai！第1章。

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

阅读后按下NEXT按钮，进入下一章Chuuko演示Koi ga Shitai！第2章。

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

现在，当我按下NEXT按钮时，我不希望它转到Dungeon Seeker第1章。因为我正在使用它将进入地下城寻求者第1章数据：newerPageUrl 作为NEXT按钮html代码的HREF值。

相反，我只想让它结束那里。

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.

更简单：

演示当我按下一个按钮时会发生什么：

Dungeon Seeker第1章

下一个按钮：Dungeon Seeker第2章
b $ b下一个按钮：Dungeon Seeker第3章

下一个按钮：Dungeon Seeker第4章

如果没有更多章节......不再有下一个按钮。

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.

似乎当我到达最新帖子时NEXT按钮自动被禁用。看起来它是预装在主题中的。

如果你明白了，
请提供代码帮助：）

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 :)

推荐答案

添加样式代码

Adding Style code

1. 在模板html中搜索此行] ]>< / b：skin>

现在将以下代码添加到]之前>< / b：skin>

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; t op：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; margin：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
和（max-w宽度：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）}}

.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;margin: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)}}

此处的完整源代码： https：/ /pastebin.com/frWjV4Ja

这篇关于Blogger主题的下一个和上一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！