当前位置:首页 » 网站建设 » 正文

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

2014年7月21日 11:05:45  分类: 网站建设  参与: 人  点这评论

  前段时间看到不少博客实现了这个功能。感觉很好既简单又美观,其实这个翻页功能也挺简单,就是把原本zblog博客自带的翻页功能进行了一下美化,让文章页更加美观、用户使用会更加方便。

image

 

第一步:首先,把下面的css样式复制到被调用的样式表里(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;}

第二步:在后台文件管理上传一张图片路径是zb-system/DEFND/default 。用的图片是下面这张,命名为arrow.png

image

第三步:在想要实现这个功能的页面添加个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>
 
这行代码不动,把/zb-sytem/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号:283648002),转载请保留出处!

本文标签:SEO优化  建站  好文分享    

<< 上一篇下一篇 >>

  • 评论(2)
  • 赞助本站

赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

| 站长投稿QQ邮箱:283648002@qq.com | 粤ICP备13055439号-1

本站采用版权 CC BY-NC-ND/2.5/CN 许可协议 Powered By Z-Blog 2.2