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

屏聚源码
屏聚源码
屏聚源码
3350
文章
24
评论
2019年9月1日21:59:06
评论
2,418

【站长学堂】在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>

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

屏聚源码
Hyper-V 虚拟机无法上网的解决方法 屏聚学院

Hyper-V 虚拟机无法上网的解决方法

Windows  8中内置的Hyper-V管理器可以说给许多人带来了惊喜!在Hyper-V管理器强大的同时,也同样面临着设置中一些不可避免的麻烦。有人说,Hyper-V虚拟机联网麻烦,其实,只要掌握了...
匿名

发表评论

匿名网友 填写信息

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