Z-Blog实现左右箭头翻页功能

这个翻页功能挺简单的，就是把自带的翻页功能美化了，让文章页更加美观、用户使用更加方便，下面为大家介绍下如何实现？

首先，把下面的css样式复制你模板的样式表里（每个模板都不同，比如谢伊丽博客模板的样式表XieYiLi-Index.css），注意图片存放的文件夹位置（images或img）。

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:-596px;background-position:0 0;}

a.next{margin-left:476px;background-position:0 -280px;}

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

然后，使用FTP工具上传下面的图片（谢伊丽博客的目录zb_user/THEME/XieYiLi（你的主题名称）/style/images文件夹下），并命名为arrow.png。

最后，把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>

标签：zblog