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

时间:2017-03-21 14:04:33

标签: javascript java html blogger

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

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

这个博客的主题实际上已经发布并没有完全开发。我下载并应用它,即使我在必要的地方几乎完成了编码,但也遗漏了一些问题。

其中一个是Next和Prev按钮。对于临时用途,我已将数据:newerPageUrl 数据:oldPageUrl 上述两个标签用于链接到上一篇文章和下一篇文章。

由于这是一个漫画网站,我想让下一个按钮工作,直到漫画标题的最后一章结尾(在相同的类别下)并给出错误说下一章还没有。

离开错误部分,现在我想要的只是下一个按钮转到漫画的下一章并停在该漫画的最后一章。

主题中已有的代码是:

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

让我更轻松地简化我的想法并告诉你: 漫画是一种漫画。 这些漫画通常分为不同的类型 一个漫画显然可以有不同的类型。 我为这些漫画提到的类型如:浪漫,学校,喜剧,动作,冒险等等 在我的博客中,我使用这些类型作为标签。

假设漫画中有3章:
Chuuko演示锦鲤ga Shitai!第1章 Chuuko演示锦鲤ga Shitai!第2章 Chuuko演示锦鲤ga Shitai!第3章

假设以上3个章节都有4个相同的标签,如:

  

浪漫,学校,喜剧,Chuuko演示Koi ga Shitai!

因为他们是同一个标题漫画的章节 Chuuko演示锦鲤ga Shitai!

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

  

第1篇:

     

标题:Chuuko演示锦鲤ga Shitai!第1章

     
    

标签:浪漫,学校,喜剧,Chuuko演示Koi ga Shitai!

  
     

帖子2:

     

标题:Chuuko演示锦鲤ga Shitai!第2章

     
    

标签:浪漫,学校,喜剧,Chuuko演示Koi ga Shitai!

  
     

第3篇:

     

标题:Dungeon Seeker第1章

     
    

标签:动作,戏剧,幻想,地下城寻找者

  

假设我正在浏览第一篇文章:Chuuko演示Koi ga Shitai!第1章。

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

现在,当我按下NEXT按钮时,我不希望它转到Dungeon Seeker第1章。因为我使用数据:newerPageUrl 作为HREF值,所以它将转到Dungeon seeker第1章。下一步按钮html代码。
相反,我只想让它在那里结束。

更简单:
演示按下按钮时会发生什么:
Dungeon Seeker第1章 下一个按钮:Dungeon Seeker第2章 下一个按钮:Dungeon Seeker第3章 下一个按钮:Dungeon Seeker第4章 如果没有更多章节......不再有下一个按钮。

似乎当我到达最新帖子NEXT按钮时会自动被禁用。看起来它是预装在主题中的 如果你明白的话, 请提供代码帮助:)

1 个答案:

答案 0 :(得分:0)

添加样式代码

  1. 在模板html ]]></b:skin>

  2. 中搜索此行
  3. 现在将以下代码添加到]]></b:skin>

  4. 之前
      

    .SVG缠绕{位置:绝对的;宽度:0;高度:0;溢出:隐藏;溢出 - X:隐藏;溢出-γ:隐藏} .nav滑动   一个{位置是:固定;顶部:50%;显示:块;轮廓:0;文本对齐:左; z索引:1000; -webkit变换:平移Y(-50%);变换:平移Y(-50% )}。NAV-滑动   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 {位置:绝对的;顶部:50%;背景色:#34495e; -webkit过渡:-webkit变换   .3s; transition:transform .3s} .nav-slide a.prev   DIV {左:0;填充左:86px;填充右:10px的; -webkit变换:平移Y(-50%)   平移X(〜100%);变换:平移Y(-50%)   translateX(-100%)}。nav-slide a.next   DIV {右:0;填充右:86px;填充左:10px的;文本对齐:右; -webkit变换:平移Y(-50%)   平移X(100%);变换:平移Y(-50%)   translateX(100%)}。nav-slide h3 {position:relative; margin:0; padding:20px   0;颜色:#FFF;空白:NOWRAP;字型重量:300;字体大小:1.3em   !important; line-height:1.5} .nav-slide div h3   跨度{显示:块;颜色:#95a5a6;字体风格:斜体;字体大小:65%;字体家庭:巴斯克维尔,“巴斯克维尔   Old Face“,”Hoefler Text“,Garamond,”Times New Roman“,serif} .nav-slide   a:悬停div {-webkit-transform:translateY(-50%)   translateX(0); transform:translateY(-50%)translateX(0)} @ media screen   和(max-width:520px){。nav-slide a.prev {-webkit-transform-origin:0   50%;变换原点:0 50%}。导航幻灯片   a.next {-webkit-transform-origin:100%50%; transform-origin:100%   50%}。导航滑动{-webkit-transform:scale(0.6); transform:scale(0.6)}}

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