-
我最早是在卢松松博客看到这个左右箭头翻页功能,为此我还给卢松松发过一封邮件,得到回复是在CSS文件里面,但是没有说出具体的操作过程。后来通过自己的一番摸索,终于现了这个功能。其实这个翻页功能也挺简单,就是把原本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>
Z-blog如何实现左右箭头翻页功能
1662人参与 |分类: 站长百科|时间: 2013年11月24日
相关文章
- 2020-04-15zblog免登录购买插件 zblog免登陆支付插件
- 2019-11-27Z-Blog用户中心(百搭)插件登录过后无法退出问题解决
- 2019-11-22Z-BlogPHP好运锦鲤主题操作教程
- 2019-11-11卢松松博客模板zblogphp版全新升级了
- 2019-11-06Z-Blog利用ue编辑器实现独立图片上传组件(免后端开发)
- 2019-08-16Z-Blog PHP的用户组分别是什么?权限有哪些?
- 2019-08-10Z-Blog验证码改为纯数字的方法
- 2019-05-06Z-Blog使用腾讯云CDN并且开启Https的配置教程
- 2019-03-05Z-BlogPHP删除分类后导致分类ID不连续的解决方法
- 2019-02-21Z-Blog PHP判断用户是否登录和级别区分的方法
评论专区德信商城