深入修改z-blog的分页页码样式及上下页
现在,在使用z-blog的博客中,好象流行修改z-blog分页页码样式。原来的分页页码的确有些丑,而且还有折行,正好趁着流行,也改一下显示样式。

其实,修改z-blog分页页码样式在大多数博客上都有类似的文章转载,这里莫国仲也抛砖引玉,顺着原来的思路介绍一下,后边还有一些深入内容:
切入正题,我是如何修改分页页码样式的呢?首先修改template下的b_pagebar.html,把
<a href="<#pagebar/page/url#>">[<#pagebar/page/number#>]</a>
改为(注意:要修改的是Html部分)
<a href="<#pagebar/page/url#>"><#pagebar/page/number#></a>
去掉两个中括号,我要做成按钮的形式,加上会很难看。
然后修改博客的样式文件,我的样式也是default.css,跟默认目录一样,大家如果是下载安装了其他模板,一般也在style目录下可找到。Z-BLOG的分页链接预留了一个CSS定义pagebar,这里我们只要定义一下这个样式就可以了。我加了一下注释,你实际要用,直接拷过去,加到CSS文件中就可以了。其实,pagebar这个css定义是可以不用的。完全可以根据自己博客情况自己定义的,将源码中<#ZC_MSG042#>:<#template:pagebar#>前边的<div class="post pagebar">,pagebar部分修改了即可。尤其是扒其他站的朋友要找注意了,在<#template:pagebar#>里是找不到pagebar这个CSS定义的。
/*--------------------------分页条-------------------------------*/
div.pagebar{
margin:10px 0 0 10px;
padding:0;
line-height:20px;
height:20px
}
div.pagebar a,.pagebar .now-page{
padding:1px 5px 2px 5px;
margin:0 2px;
text-align:center;
font-weight:bold;
font-family:Verdana;
border:1px solid #ccc;
text-decoration:none
}
div.pagebar a:hover{ /* 定义鼠标滑过页码样式 */
BACKGROUND: #4BA44B;
COLOR: #222222;
border:1px solid #ACE149;
text-decoration:none
}
div.pagebar .now-page{ /* 定义当前页码 */
BACKGROUND: #7CCC31;
COLOR: #222222;
}
另外,还有一个问题,如果想要做的更贴近流行方式的话,一般在分页前后都是写为“上一页”“下一页”的而不是《 和 》 ;但是,在<#template:pagebar#>里是没有找不见的。我苦恼了好一会儿,后来在DW里发现这两个书名号其实有特定字符编码的,我就Ctrl+F,查找了一般网站源码,果然,在LANGUAGE\SimpChinese.asp里,自定义信息中Const ZC_MSG285 和Const ZC_MSG286后边的参数值便是。
即将
Const ZC_MSG285="«"
Const ZC_MSG286="»"
改为:
Const ZC_MSG285="上一页"
Const ZC_MSG286="下一页"
即可,大功告成。Z-blog里的模板基本上都可以是自定义的,只有有耐心去细看,去琢磨便总会有惊喜的,呵呵。
这是最新鲜的
- [03/31]干货:价值2万元营销型企业网站策划方案,Axure原型下载
- [02/29]电商代运营,2012年传统行业的入网快艇!
- [02/26]30天让你的关键词排名飙升
- [01/12]干货分享:如何让软文被免费推荐到各大媒体网站首页
- [01/12]2012不是电商寒冬,更不是末日!
- [01/11]2012电商投资将归理性,零售人才成争夺热点
- [01/09]莫国仲:企业微博营销需避三大误区
- [01/08]实操:B2C数据分析之漏斗分析图实现
- [01/04]强烈推荐:20款优秀免费Wordpress留言表单插件
- [12/30] SNS营销必备:(FaceBook,Twitter,Social Marketing)资料全集 - 莫国仲元旦大礼包

1楼 痔疮药
Post:2011-6-7 16:39:52