跳至主要内容

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模板了。收工!
Power by 写写改改™

此博客中的热门博文

Google sites中文超和谐版

新版的Google sites已经支持38种语言,其中就有中文版。
中文版一推出,估计会有更多人涌来使用,其中可能有一小撮是别有用心的人。所以按Belen的猜想,估计Google sites被墙是不久的事了。为了伟大某党和谐事业需要,大部分贪小便宜的广大用户,就乖乖掏钱去租空间折腾去吧!!!

Google sitesGoogle Apps是绝配,可以免费搭建中小型企业的在线办公环境。Google Sites之前还只是Google Apps用户可以使用,5月才开始给Google注册用户使用,现在又增加了更多语言支持,GFans又有得玩了(有GFans说用Google产品是玩网游)。

不过,和Google已经放弃的Google Pages相比,Google Sites本身自有对G-F-W免疫的能力(所以称其为“超和谐版”),原因是其支持加密访问,可以绕过那堵破墙,访问地址是:https://sites.google.com

这样看起来,似乎国内的中小型企业也可以用Google Apps来省钱了,其四大主要应用:GMailGoogle DocsGoogle CalendarGoogle Sites都可以用加密来访问,很轻松的绕过那堵破墙。只是要绑定域名的话,还是会有点麻烦。会折腾Google Apps的用户,也有得玩了。
Power by 写写改改™

没有其他,之前的Blogger还有多少路过呢?路过就签名吧

来点气氛吧
Power by 写写

做好了一个网址导航的BLogger

这两天,做好了一个网址的导航Blogger:网址速递
呵呵,准备将个人收集的网站全部共享出来
发现现在收集网站比较忙了,首先是收藏到Google Bookmarks,然后还要收藏到del.icio.us。因为Google Bookmarks书签暂时还不可以共享,所以还是要用del.icio.us。但用了blogger后,发现又有比del.icio.us好的方法,就是可以自己编辑内容的显示版面,虽然是收藏过程比del.icio.us花时间。
刚开始做,网址还在不断添加中...
更新:续: 做好了一个网址导航的BLogger
Power by Google乐园