宿迁波仔博客

zblog博客如何实现左右翻页功能

最早看到这个左右翻页是在卢松松的博客,不过这几天也看到不少博客实现了这个功能。其实这个翻页功能也挺简单,就是把原本zblog博客自带的翻页功能进行了一下美化而已。或许就是因为简单,不值一提,所以没有这方面的博文,今天刚好有博主问到了这个功能,那么就由宿迁波仔为大家分享下吧。

首先,把下面的css样式复制到被调用的样式表里(这个可能都不一样,卢松松博客模版默认的是LuSongSong-Index.css

a.prev,a.next{display:block;width:108px;height:282px;position:fixed;left:50%;top:50%;margin-top:-141px;background:url("images/arrow.png") no-repeat;}

a.prev{margin-left:-600px;background-position:0 0;}

a.next{margin-left:486px;background-position:0 -320px;}

a.prev:hover,a.next:hover{background-color:#F7F3ED;}

然后,上传一张照片,命名为arrow.png,用的照片是下面这张。

左右翻页

最后,在想要实现这个功能的页面添加个A标签就行了。比如文章页面:

b_article-single.html页面

把<div class="post-nav"><#template:article_navbar_l#><#template:article_navbar_r#></div>

替换成下面这两行代码即可。

<a class="prev" href="<#article/nav_l/url#>"title="<#article/nav_l/name#>"></a>
<a class="next" href="<#article/nav_r/url#>" title="<#article/nav_r/name#>"></a>

或者

<div class="post-nav"><#template:article_navbar_l#><#template:article_navbar_r#></div>

这行代码不动,把/wwwroot/zb_system/DEFEND/default/目录下的b_article_navbar_l.html和b_article_navbar_r.html里面的代码分别换成下面这两行也行:

<a class="prev" href="<#article/nav_l/url#>"title="<#article/nav_l/name#>"></a>
<a class="next" href="<#article/nav_r/url#>" title="<#article/nav_r/name#>"></a>

基本就是这样。

2013-11-06 | 发布:宿迁波仔博客 | 分类:zblog | 评论:35

留言列表:

  • 小污师 发布于 2016-05-10 09:20:05  回复
  • 好流弊啊
  • 赢在大学励志网 发布于 2014-12-13 20:17:39  回复
  • 这个不错的啊
  • 牧云博客 发布于 2014-11-24 16:40:30  回复
  • 好厉害啊,已转
  • 宿迁波仔博客 发布于 2014-09-26 22:09:18  回复
  • 今天搜了一下,发现:我的这篇关于zblog左右翻页的文章居然被转了N次了。但是却没有一个带链接的。。
  • 51talk英语角 发布于 2014-06-06 13:53:15  回复
  • 免费英语在线学习
  • 彩云谷 发布于 2014-05-13 18:23:08  回复
  • 这个wwwroot目录为什么找不着呢?请问在哪里?
    • 宿迁波仔博客 发布于 2014-05-22 10:36:16  回复
    • wwwroot这个是我的网站的根目录。这个目录不一定一样的,还有的是web或者www的。
  • 彩云谷 发布于 2014-05-13 18:22:21  回复
  • wwwroot/zb_system/DEFEND/default/ 这个目录为什么找不着呢?请问在哪里?
  • 小小蚂蚁博客 发布于 2014-03-29 13:41:01  回复
  • 为什么完成后点击前背景显示的是红色呢,怎么修改其他颜色?
    • 宿迁波仔博客 发布于 2014-06-04 19:30:38  回复
    • css样式在看一下。
      • 小小蚂蚁博客 发布于 2014-06-04 19:34:02  回复
      • 嗯,已经解决了
  • 区间站博客 发布于 2014-03-14 10:21:34  回复
  • arrow.png这个传到哪
    • 宿迁波仔博客 发布于 2014-03-22 23:50:53  回复
    • 可以放到任何位置,只要调用的时候路径对就行了。
  • 龙三公子 发布于 2013-12-21 15:58:27  回复
  • 这个好,哪天我也把我的给整一下。不过我用的不是松松主题,应该不受影响吧。先谢谢了!
    • 宿迁波仔博客 发布于 2014-03-10 18:07:04  回复
    • 嗯,这个不是zblog改下代码也是可以的。主要是通过CSS样式实现的。
  • 生活随笔 发布于 2013-12-02 22:29:00  回复
  • 恩,谢谢你耐心的解答了,我在看看哦!
  • 生活随笔 发布于 2013-12-02 21:40:22  回复
  • 博主好啊!按你的做了,也显示出翻页的图标的,怎么点击后找不到链接文章呀!博主有时间不?你帮我看一下吧!谢谢!
    • 宿迁波仔博客 发布于 2013-12-02 22:01:51  回复
    • 应该是你的文章标签调用错了吧。
      • 生活随笔 发布于 2013-12-02 22:09:40  回复
      • 没有吧!那能具体点吗?
        • 宿迁波仔博客 发布于 2013-12-02 22:12:28  回复
        • 原有的翻页代码:<div class="post-nav"><#template:article_navbar_l#><#template:article_navbar_r#></div>

          替换成下面这两行代码即可:

          <a class="prev" href="<#article/nav_l/url#>"title="<#article/nav_l/name#>"></a>
          <a class="next" href="<#article/nav_r/url#>" title="<#article/nav_r/name#>"></a>
          • 生活随笔 发布于 2013-12-02 22:19:06  回复
          • 我就是这样替换的,就是不行,哎!
            • 宿迁波仔博客 发布于 2013-12-02 22:23:49  回复
            • 那你把/wwwroot/zb_system/DEFEND/default/目录下的b_article_navbar_l.html和b_article_navbar_r.html打开看看里面调用的那个是什么标签。看看是不是<#article/nav_l/url#>和<#article/nav_r/url#>

              我刚看了下你的css样式,显示的效果貌似也不对。你在仔细看看吧。上面的代码多个人测试了,绝对可用。
          • 生活随笔 发布于 2013-12-02 22:46:34  回复
          • 你说的文章标签我看了是一样的,实在不行了,既然找不到文章链接,我只好做自己想要的链接吧!呵呵
            • 宿迁波仔博客 发布于 2013-12-03 09:45:14  回复
            • 嗯,看到了,你把他弄成固定的了。
  • 王发利博客 发布于 2013-11-18 10:26:44  回复
  • 呵呵 看看 学学
  • 小虎博客 发布于 2013-11-18 00:52:10  回复
  • 首页要怎么添加呢?
    • 宿迁波仔博客 发布于 2013-11-18 09:10:47  回复
    • 首页直接是手动添加的,直接写成固定的。
      • 卡片人生 发布于 2014-12-10 19:38:43  回复
      • 请问如何手动写入首页,我刚刚入手这个程序,还望详细指教,谢谢!
  • 爱浮夸 发布于 2013-11-14 20:40:03  回复
  • 早知道了。
    • 宿迁波仔博客 发布于 2013-11-14 20:46:09  回复
    • 嗯,挺简单的,不过还有些人不太清楚。
  • 免费部落 发布于 2013-11-10 20:53:37  回复
  • 没用过ZBOLG,应该不错吧!
    • 宿迁波仔博客 发布于 2013-11-14 20:44:59  回复
    • 嗯,挺好的,可以试试哦。
  • 馒头饭madfan 发布于 2013-11-09 22:03:24  回复
  • 我也想加一个呢。。可惜博客不支持呢。。
    • 宿迁波仔博客 发布于 2013-11-10 11:06:18  回复
    • 你的博客是宽屏的嘛,这个可以支持的,就是CSS的样式。
  • IT青年 发布于 2013-11-09 15:15:52  回复
  • 还是比较简单,复杂了,很多人就不会了
    • 宿迁波仔博客 发布于 2013-11-09 17:27:59  回复
    • 嗯,挺简单的,就是一个css样式。
  • 站长百科er 发布于 2013-11-09 10:53:31  回复
  • 一些老程序也是增加新内容才能持续牛叉下去,如Z-BLOG
    • 宿迁波仔博客 发布于 2013-11-09 17:28:26  回复
    • 这样修改可能翻页会更方便一些。
  • 游客 发布于 2013-11-08 20:44:01  回复
  • WP的没有啊。我是wp的。
    • 宿迁波仔博客 发布于 2013-11-08 22:04:24  回复
    • wp的标签我没有去看,要搞肯定也是可以的。

发表留言: