Chinese Blogger 禾草唐楷: 解答“亚一”关于blogger模版修改的问题
重点提示：修改前务必备份你的代码，可以通过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是根据你的需要设定背景图片的高度，如果省略可能会有显示不全的问题。
0 评论:
发表评论