微西风博客

当前位置:网站首页 / 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

推荐阅读

文章标签: Zblog教程

版权声明: 本文除特别说明外均由原创

本文链接: http://www.weixifeng.com/post/64.html,尊重共享,欢迎转载,请自觉添加本文链接,谢谢!

分享本文:

Hello!看完文章有何感想呢?
  • 无聊

    0

  • 流汗

    0

  • 嘿嘿

    0

  • 支持

    0

  • 疑问

    0

呃 本文暂时没人评论 来添加一个吧

发表评论*(使用右侧的多说进行评论,外链是无Nofollow的哦!)

必填

选填

选填

◎请勿使用“IE模式”或者“IE浏览器”进行二次回复。上一篇  返回首页  下一篇

Top