z-blog分页样式的修改与博客网站的浏览体验

六月

分类：网站日志 | 评论数：7 | 点击数：8928 | 发表日期时间：2010-06-01 22:00:00

分享到：

本文导读：

　　我博客不时引来一些同事的关注，今天也收到同事的强烈投拆了，指出他不知道自己浏览的页面在哪个位置。找不到上一页和下一页等的按钮等。为此我展开自查行动。

正文

　　我的博客得到了同事的关注，但今天也收到同事的强烈投拆了。他指出不知道自己浏览的页面在哪个位置上。找不到上一页和下一页等的按钮。为此我展开对博客网站用户浏览体验的自查行动。
　　
　　经过一番详细了解，原来问题就出在博文列表底部的页码上，文字过小太不显眼了，当前页状态只是页码的数字颜色改变，而且颜色的改变又跟旁边的数字颜色差别不大。再个问题是，鼠标也没划过效果，这些问题在技术人员眼里看来的小问题的原因，但作为单纯观众的同事，就觉得看得很累了，就因为这个分页导航问题而感觉到整个博客体验效果差极了。
　　
　　分布导航条，对于整个博客来讲就是一个重要的查看博文列表的重要功能，如果不能提示浏览者当前位置，以及导航视觉效果差，真的会影响很大，为此我开始对博客网站的操刀修改。
　　
　　z-blog分页样式的修改步骤：
　　
　　1、在模板文件存放目录TEMPLATE中找到b_pagebar.html文件，支掉里面的中括号。
　　
　　2、找到样式表文件夹STYLE的样式表文件，增加以下分页的样式代码：
　　
　　/*以下是页码样式*/
　　div.pagebar{
　　margin:10px0010px;
　　padding:0;
　　line-height:20px;
　　height:20px
　　}
　　
　　div.pagebara,.pagebar.now-page{
　　padding:1px5px2px5px;
　　margin:02px;
　　text-align:center;
　　font-weight:bold;
　　font-family:Verdana;
　　border:1pxsolid#ccc;
　　text-decoration:none
　　}
　　
　　div.pagebara:hover{/*定义鼠标滑过页码样式*/
　　BACKGROUND:#DC143C;/*根据需要修改背景颜色*/
　　COLOR:#FFF;
　　border:1pxsolid#DC143C;/*数字按钮的边框*/
　　text-decoration:none
　　}
　　
　　div.pagebar.now-page{/*定义当前页码*/
　　BACKGROUND:#cdcdcd;/*根据需要修改背景颜色*/
　　COLOR:#DC143C;/*数字按钮的边框*/
　　
　　以上工作完成后，刷新网站后，就看到漂亮的分页效果了。注：样式代码在网上搜索找到的。
　　
　　经过此次自查，还发现另一个不适用我目前的博客网站使用的一个插件，该插件的功能是当摘要文字小于全文字数时刚在博文列表里增加“阅读全文”的链接。以前我写博文时，摘要文字是在正文中自动截取的，但这种方法，不能更好体现正文的意思，所以后来我都是自己再另外写摘要。这样的话自动添加“阅读全文”的链接的这个功能就没必要存在了。而且对于“阅读全文”这样的一个锚文字，从搜索引擎优化角度来说，不好。所以我还是决定取消该功能。找到插件列表，停用。再进行“文件重建”。OK。
　　