陈德馨

Z-blog如何实现左右箭头翻页功能

659人参与 |分类: 站长百科|时间:2013年11月24日 15:32

我最早是在卢松松博客看到这个左右箭头翻页功能,为此我还给卢松松发过一封邮件,得到回复是在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,我用的是下面这张图片。

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>

来源:陈德馨博客(微信/QQ号:35435164),转载请保留出处和链接!

地址:

必填

选填

选填

◎已有 0 人评论,请发表您的观点。