微西风博客 @ 09-15 17:07:59   Zblog教程   0/856 Zblog教程

给Zblog-php博客加上左右翻页的小箭头

  这个zblog翻页箭头好像是卢松松博客先推出的,后来看了有几个使用卢松松博客主题的网站也弄了这个东西。但是我感觉并没有什么卵用,像我们这种有强迫症的人看着网页上挂两个东西,跟广告联盟的广告一样,恨不得马上给屏蔽掉。

  虽然我使用的不是卢松松主题,但是人家博客大佬网站有的咱们小喽啰要以榜样来实践。还有一个问题就是网上搜索的教程都是千篇一律,全是你复制我的,我复制他的,到我手上没一个能用的。

咱也不懂代码,但是谁让咱聪明呢,就算不懂PHP、html最终还是让我费了九牛二虎之力搞定了这个箭头翻页功能。(方法是在某教程上的基础上改进的)下面先上卢松松博客的效果图和本站的效果图,稍后带来教程。


卢松松博客箭头翻页实例图


本站翻页示例图(将箭头替换了,有点非主流)


zblog-php添加箭头翻页的教程:

第一步:打开你所使用的主题下的css文件,通常是/zb_users/theme/主题文件名/style/XXX.CSS

第二步:在css文件内添加以下代码,然后保存覆盖原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: ;}

第三步:打开你需要显示此箭头翻页的页面,首页模板或者是文章页模板。

在此文件内添加以下代码,然后保存覆盖。

<a class="prev" href="{$pagebar.prevbutton}" ></a>
<a class="next" href="{$pagebar.nextbutton}" ></a>

第四步:将箭头文件存放至/zb_users/theme/主题文件名/style/images/下,并改名为:arrow.png

然后博客后台重新编译模板,打开首页或者文章页就OK了。

(本人是代码小白,完全不懂,不过我只看结果,不看过程,程序员的世界不敢懂)


翻页箭头素材:

卢松松博客版


如果你不喜欢这两款可以联系本人制作,QQ:649533269

  •  明月登楼 发布于 2015-09-20 19:39:38  回复
  • 不错,很棒的感觉,就是不知道WP下怎么实现!

发表评论:

«   2016年12月   »
1234
567891011
12131415161718
19202122232425
262728293031
最近发表
最新留言
返回顶部
Top