|
最早看到这个左右翻页是在卢松松的博客，其实这个翻页功能也挺简单，就是把原本zblog博客自带的翻页功能进行了一下美化而已。其实很简单，为大家分享下吧。
首先，把下面的css样式复制到被调用的样式表里（这个可能都不一样，卢松松博客模版默认的是LuSongSong-Index.css），注意图片存放的文件夹位置（images或img）。 1 2 3 4 | 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;}
|
然后，使用FTP工具上传下面这一张图片到zb_users/THEME/你的主题名称/STYLE/images文件夹下（本站是在img文件夹下），并命名为arrow.png。 
最后，在想要实现这个功能的页面添加个A标签就行了。比如文章页面：
在b_article-single.html页面 方法一：把
1 | <div class="post-nav"><#template:article_navbar_l#><#template:article_navbar_r#></div>
|
替换成下面代码即可。
1 2 3 4 | <div class="post-nav">
<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>
|
方法二：下一行代码不动
1 | <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里面的代码分别换成或直接追加下面这两行也行。 1 2 | <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>
|
基本就是这样。最后文件重建（ [更新缓存] ）、刷新下文章页面就会看到效果了，本站有演示效果，随便打开一篇文章看效果！ 注：本站测试过，使用方法二，保持原来的代码不变，再直接分别追加代码即可。
好消息！ 现在订阅阿飞博客，立即赠送最新最好最有价值的资源给你!
第一步：点击这里
第二步：输入您的QQ邮箱
第三步：登陆QQ邮箱，点击确认连接
第四步：成功订阅
如果感觉本文章对你有价值，可按您心情自愿付费： 支付宝 andyzeng981@163.com 曾德飞
除非注明，文章均为( 阿飞博客 )原创，转载请保留链接: http:///197.html
订阅公众号：diqiujiayuancom 站长微信(QQ)：81531444
|
