2006年10月30日星期一

解答“亚一”关于blogger模版修改的问题

有访问者“亚一”询问我这个博客模版具体是怎么修改的,其实关于blogger模版修改的文章在网上很多了,尤其是在google针对博客搜索的引擎里边只要输入“blogger 模版”就会得到大量的模版内容。当然这些模版我都大致浏览过,不过个人感觉,很多西方化的设计和大量的hack以及外部JS的调用,反而会造成很差的界面体验和用户体验。其实blogger本身提供的很多模版本已经有了很好的基础,针对这些模版只需要做简单的修改处理一样可以产生很好的个性化效果。今天就写一篇我这个模版的修改说明,为那些希望打造个性化界面的用户提供一些参考。

blogger是一个基于CSS-DIV的标准化设计,对于很多已经熟悉html的用户来说,可能刚刚开始的时候会有些陌生,那么可能就需要寻找一些相关的基础CSS教程去看看,先做一个技术上的熟悉准备,这样在修改的时候就会目标明确,思路清晰。CSS-DIV是一种标准化的网站结构,他的特点是为网络展示搭建界面和装载器,但是并不提供数据和内容。就好像提供一个样式丰富的抽屉,至于抽屉里边装什么,那跟他无关,他只管抽屉,而且一旦这个抽屉建设好了,他会通过这种标准化的结构,很轻松的实现将抽屉中的数据放置进入另外一个抽屉。

在blogger中不同的模版修改的方法是不同的,我的模版是Rounders2这个模版,因此下边的修改内容也是针对这个模版的,如果你选择的并不是这个模版,那么修改过程对你仅仅是起到一个参考作用,因为大概的方法都是相似的。

修改测试环境:Beta版本blogger 模版:Rounders2 操作系统:Xp SP2 浏览器:IE6 显示分辨率:1024或1280

重点提示修改前务必备份你的代码,可以通过download的方式也可以直接把所有代码拷贝粘贴进记事本保存,以备修改崩溃后能够顺利恢复。

重要提示在模版编辑页面,有个小的选择框,是针对所有模块的代码是否展开的选择项,我们一般修改模版和备份模版的时候都应该把这个选择项选择上,保证代码的完整性。

blogger模版中各模块介绍:

通读模版代码,你会发现主要有这么几块内容:

1,标准声明

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

这是标准xml的声明内容,也有些后台参数,本修改与此无关,不多说。

2,头文件声明

<head>大量代码...</head>

一个头文件的声明,也包括整个模版很核心的CSS数据。我们对很多的修改是集中在对CSS的修改上,因此这块是我们关注的重点。我的模版修改的首页LOGO图,字体,字体颜色,去处顶部导航等均是在这部分操作的。

3,内容展示

<body>大量代码.....</body>


这是整个内容展示模块,所有的CSS设定通过在这个模块中产生作用并展示给用户。因为beta版本已经有了很好的可视模块添加,修改,删除等操作,因此这块仅仅是我们为了实现更多个性化操作需要了解的内容。我的添加返回首页,返回文顶,屏蔽LABEL等均是在这部分操作的。

一,如何去掉blogger的导航条(位居顶部的)

在CSS声明中添加如下代码:

#navbar-iframe {height: 0px; visibility: hidden; display: none }

我选择的位置是在头部装载器的后边,示例如下:

#header-wrapper {
background: url("") no-repeat left top;
margin:0px 0 0 0;
padding:0px 0 0 0;
color:#eae7ba;
}

#navbar-iframe {height: 0px; visibility: hidden; display: none }

二,字体应该如何设置

中文字体是非常特殊的字体,如果不能很好的设置字体,会给访问者带来不好的体验效果。当然在字体设置上也是各有所爱,我采用的字体仅仅是根据自己的喜好而定,在此提供给大家作为参考。

blogger多采用的是相对尺寸显示字体大小和字体内容,多采用的是100%,200%这样的方式,个人感觉也比较好看,配置比较规整,但是我还是选择了我更加喜欢的方式。

博客内容字体:verdana 大小:14px
博客标题字体:黑体 大小:200% 250% 300%
全文字体:verdanna 大小:9pt

示例如下:

<Variable name="pageTitleFont" description="Blog Title Font" type="font"
default="normal bold 300% 黑体" value="normal bold 10% 黑体">

将博客标题文字最小化,因为我采用了LOGO图,不再需要标题文字及说明

<Variable name="postTitleFont" description="Post Title Font" type="font"
default="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 250% 黑体">

这是文章标题字体设置

.post-body {
border:1px dotted $borderColor;
border-width:0 1px 1px;
border-bottom-color:$mainBgColor;
padding:10px 10px 1px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height: 25px;
}

这是文章字体设置,这里我设置了一个line-height:他主要的作用是在你的发帖文字那部分拉开行与行的距离,不会让文字一行挨一行的堆积在一起,行与行之间保留一定的距离为访问者看文章的时候提供一个舒适的观看效果。padding是一个在这个文字模块的周边营造一个距离空间,也是为了视觉上的美观特意设定的。我很多文章都有图片,如果不留一定的空间距离,文字紧紧贴在边框旁边或者图片旁边也是非常难看的。padding后边跟着的参数是针对上,右,下,左的顺序来定制的。

.post img {
margin:0PX 30px 5px 0px;
padding:4px;
border:1px solid $borderColor;
}

这是文章中图片属性设定,这段代码主要是设定你在发帖内容里边如果有图片,你希望他按照什么样的形式去显示,主要修改的是他的padding属性,保证图片有边框,边框距离图片多宽,以及图片外围跟文字距离多大合适。

重点提示:字体选择应该选择那些在操作系统中默认安装的字体,这些字体英文一般verdana很漂亮,中文字体宋体,黑体。尺寸大小一般小字可以设置为9pt,中号字体可以设置为14px。这些可以保证无论英文还是中文都显示更加方正规范美观。

三,如何增加一个图片性质的标题LOGO

CSS中所有的图片都是以背景图片的形式显示的,这同我们html中是有很大不同的。那么我们只需要在认为合适的地方增加一个背景图片就可以实现标题LOG图。

示例如下:
#header {
background:url("你需要的图片地址
") no-repeat left bottom;
padding:0 0px 0px;
height:252px
}

在头部装载器这块增加背景图片内容,显示你的标题LOGO。height是根据你的需要设定背景图片的高度,如果省略可能会有显示不全的问题。

9 条评论:

亞一 说...

谢谢你的解答,呵呵~~非常感谢,我会一直关注你的blog,最近比较忙,因为作业,等过了这一阵,我也会做一个漂亮的logo~~

Ian 说...

好东西,谢谢

萌萌 说...

我想给自己的blog加一个文章可以expandable的功能,类似于你的那个。
我照blogger帮助上的做,结果不好用

http://help.blogger.com/bin/answer.py?answer=42215&topic=8932
Blogger Help : How can I create expandable post summaries?

能告诉我怎么做吗?
zym1010.blogspot.com
email zym1010@gmail.com
模板地址 http://zym1010.googlepages.com/template.xml
谢谢

禾草唐楷 说...

这两天工作上的事情非常多,呵呵,不能及时给你回复解释,给你发了信件了,如果有什么问题,一般晚上会偶尔上线一下,留言交流吧,感谢访问!

这个HACK来源于:http://hackosphere.blogspot.com/2006/09/expandable-posts-with-peekaboo-view.html

Coolguy~ 说...

你的博客太好了,我要向你学习好多东西啊,我会常来看的,呵呵。

slashlu 说...

你好,请问下,我右侧一栏为什么发布照片过大的时候会跑到下面去,sidebar。

http://babyshoot.cn

能教我一下么

禾草唐楷 说...

你好,Slashlu,显而易见是你侧栏的宽度小于内容的宽度造成的,由于你对侧栏的宽度超界缺乏定义,超界的侧栏宽+正文宽超过了网页规划的宽度,自然把侧栏顶到了网页的最下边。

解决办法:侧栏宽度值定死,内容尽量控制不超过侧栏宽度值,如果用到margin,padding还牵扯到不同浏览器的兼容问题。

还有就是有个CSS代码定义超界不显示,这样就算不注意超界了,超界的内容也不会显示出来,不影响整体版面布局,你去搜索引擎查下,好久不玩代码了,具体的也忘记了。关键字:CSS 侧栏错位

slashlu 说...

谢谢你

slashlu 说...

谢谢你