博客专栏 | RSS订阅 | 微信号 | 腾讯号 | 百家号 | 新浪号 | 头条号 | 搜狐号 | 网易号 牛犊网 - 创业者和职场人的启蒙导师
你的位置:首页 » 博客专栏 » 正文

为你的zblog主题文章列表页和首页添加左右翻页箭头

琚叶青 • 2015年2月16日 • 次阅读 • 1个评论 标签 : 网络营销 网络创业

近期估计大家都发现我的牛犊网主题模板在首页和列表页的左右两侧添加了翻页箭头,让列表页和内容页一样可以实现简单快捷的翻页功能,这个功能最早其实是在煎蛋网主题流行起来的。下面我看看效果图:


为你的zblog主题文章列表页和首页添加左右翻页箭头


好了,进入正题,写一个简单的教材:


请直接打开zblog主题下的模板default 和 catalog 最好在标签

<div id="right">

上方方直接添加代码:

<div id="post-nav"><#template:pagebar_previous#><#template:pagebar_next#></div>

上面标签就是zblog官方wiki给出实现上下页的代码。然后在css文件中添加代码:

/*----------列表页上下篇翻页----------*/

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

#post-nav .pagebar-previous a{margin-left:-615px;background-position:0 0;} 

#post-nav .pagebar-next a{margin-left:507px;background-position:0 -320px;} 

#post-nav .pagebar-previous a:hover,.pagebar-next a:hover{background-color:#333333;}

#post-nav .pagebar-previous a span,.pagebar-next a span{ display:none;}

其中的翻页箭头图片自己可以修改添加以及根据自身的主题模板更替。


最终上传保存就可以就可以完美实现列表页和首页上下页翻页的效果啦。小伙伴们赶快自己动手试试吧!~ 

来源 : 牛犊网(公众号 : Newdur),欢迎转载和分享。

相关文章推荐 网络营销 网络创业

已有1位网友发表了一针见血的评论,你还等什么?来一发

  • 1
    提问  发布于 2015/12/7 11:04:13  回复Ta
  • 请问你的是asp还是php版本的教程,好像我的asp的按照你的方法实现不了呢?

必填

选填

选填

记住我,下次回复时不用重新输入个人信息