BLogger模板修改：实际经验小结

本站刚刚升级为三栏式模板，经过一番折腾，又有些长进了。
首先是CSS问题，是最头痛的问题。修改过程不断在诅咒可恶的浏览器，相同CSS在Firefox和ie中表现各异，对于业余网页设计的我来说，是最难解决的问题。太复杂的问题就不研究了，看看一些比较实用的，从容易的地方下手：
1、注意清除Float浮动，在CSS中放：.clear {clear:both;height:0px;}，在需要清楚的地方放如下代码：<div class='clear'/>
在BLogger默认模板都有这些代码！
2、CSS继承，我喜欢把其分为全局CSS和局部CSS，局部会继承全局的CSS定义。
比如定义全局CSS如：a {color: #78a515;}，然后定义一个局部的CSS，如：.post-body a {text-decoration: underline;}
看看post-body下的链接颜色，就是之前定义#78a515了；如果想让post-body的链接有不同颜色的话，就要对其进行定义，如：.post-body a {color: #cccccc;text-decoration: underline;}
在做复杂CSS定义时，经常会出现一些无缘无故的继承，有时调试起来还挺辣手。解决办法就是全局CSS尽量少定义，其次就是将有继承关系的CSS按顺序写在一起，并做相应注释。
3、利用CSS缩写，优化代码。常用缩写如下：
颜色缩写：【#ccc】；
字体缩写：【font:italic small-caps bold 2px/120% Arial, Tahoma, "Lucida Sans";】；
定位缩写：【margin:0px auto 】【margin:1px 0 1px 1px; 】【padding:1px 0 1px 1px; 】；
边缘缩写：【border:2px solid #ccc; 】；
底色和背景缩写：【background: #ccc url(feed.gif) no-repeat left center;】；
List缩写：【list-style:square inside url(rrow.gif)】【list-style:none;】；
同一属性缩写：【h1, h2, h3, h4, h5, h6 {#ccc;}】【#main h5.comment-footer a,#main h5.comment-footer a:hover {color:#000;margin:0;}】

看完CSS后，来看看BLogger模板XML代码，其中个人认为最好玩的if判断语句。有了判断，可以让只有一个文件的页面，可以有很丰富的变化。比如之前的模板，通过判断，右侧顶部在首页时，显示归档文章，到了文章预览时，该位置显示为Google Adsense广告。
见到有的用户，将这个判断放到title前，之前还以为只可以放在body内。模板内有好多有关判断的语句，下面摘录常用的几个：
<!--只在标签页中显示-->
<b:if cond='data:title != "http://blog.ibelen.com/search/label/Google"'>
//内容代码//
</b:if>

<!--不在首页显示-->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
//内容代码//
</b:if>

<!-- 不在首页显示 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
//不是首页时显示内容//
<b:else/>
//首页显示内容//
</b:if>

<!--只在首页显示-->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
//内容代码//
</b:if>

还有，如何添加一个新的组件（widget）呢？关键是要加section，有了section后，在后台的组件窗口载加Widget到section，就很容易了（不用自己写Widget代码）。看看section代码如下：
<b:section class='main' id='main' showaddelement='no'>
</b:includable>
其中有两个关键点，一是Class，自己用CSS定义section，比如宽度，底色，标题，链接等等；而ID是该section的名称，注意不能和已有的section名称相同。学习了section的结构后，好像可以尝试自己排版一个BLogger模板了。收工！

本文转自：写写改改