【站长学堂】在zblog博客文章内容页里实现左右箭头翻页功能

屏聚源码 2019年9月1日21:59:06屏聚学院评论59,922阅读模式

【站长学堂】在zblog博客文章内容页里实现左右箭头翻页功能【站长学堂】在zblog博客文章内容页里实现左右箭头翻页功能 最早看到这个左右翻页是在卢松松的博客,其实这个翻页功能也挺简单,就是把原本zblog博客自带的翻页功能进行了一下美化而已。其实很简单,为大家分享下吧。

【站长学堂】在zblog博客文章内容页里实现左右箭头翻页功能

  首先,把下面的css样式复制到被调用的样式表里(这个可能都不一样,卢松松博客模版默认的是LuSongSong-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:-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。

【站长学堂】在zblog博客文章内容页里实现左右箭头翻页功能

  最后,在想要实现这个功能的页面添加个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>

  基本就是这样。最后文件重建( [更新缓存] )、刷新下文章页面就会看到效果了,本站有演示效果,随便打开一篇文章看效果!

继续阅读
屏聚源码
软著申请流程详解 屏聚学院

软著申请流程详解

前言 计算机软件著作权:是指自然人、法人或者其他组织对计算机软件作品享有的财产权利和精神权利的总称。通常语境下,计算机软件著作权又被简称为软件著作权、计算机软著或者软著。 计算机软件著作权与一般作品著...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定