最早看到这个左右翻页是在卢松松的博客,其实这个翻页功能也挺简单,就是把原本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。
最后,在想要实现这个功能的页面添加个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 > |
基本就是这样。最后文件重建( [更新缓存] )、刷新下文章页面就会看到效果了,本站有演示效果,随便打开一篇文章看效果!
继续阅读
评论