2007年2月5日星期一

CHINESE BLOGGER模版2.0投入使用

经常访问我这里的同志们应该看到了,禾草唐楷2007模版更新了,变成了版本2.0了。其实这种更新是非常被动的一个过程,来源于一个博友在QQ上跟我偶然谈及的FF错误。从禾草唐楷2007模版开始设计,当时是为了迎接新年图个噱头,我始终是在IE的环境下测试制作的,压根没有想到最后的浏览器兼容性,自己使用严格的CSS语法,况且很多改动是基于图形,仍然是沿袭BLOGGER模版的固定结构,但是最后的情况看,当时的想法是极端错误的。

当我用FF浏览博客的时候,会发现大量的错误,错位,甚至是整块内容的混乱,在我ANALYTICS中,有接近30%左右的访问者用的是FF浏览器,国外的访问比例也在30%左右,我估计很多国外访客用FF的很普遍,事态严重到不改不行的程度,最后想来,春节将至,顺势也就把这些琐碎都处理了吧!

通过整个的更新过程来说,如果仅仅针对单一浏览器,工程量其实非常小,20分钟就可以完成某个局部的彻底更新,但是非常麻烦的是要保证IE的界面又要保证FF的界面可就罗唆了,如果我整个模版的代码一开始就基于这两种浏览器测试的话,也会相当方便省事,但是一旦产生了大量的不支持FF浏览器代码,逐条修改则令人十分厌烦。将这部分心得写出供同志们参考。

在开始第一行代码修改的时候,请务必打开两种浏览器来进行测试,不要将很多后患留在后边。FF和IE对CSS的解释有个最大的区别,就是MARGIN,PADDING,BORDER。从我的经验上看,FF要更加严谨,IE则更加简单,FF对于没有设定的格式断然不会自做主张解释用户思路,而IE很多时候会有些个性发挥;在间距,线段,内部距离这些参数上,他们的区别更大,IE是宽度+距离的思路,而FF则是宽度包含距离的思路,当严谨的版面尺寸定义之后,对很多样式模块设定距离则会在两个浏览器中产生大量的麻烦问题。所以最好的解决办法是少用PADDING,BORDER这样的样式属性。多从这个角度想,固定尺寸的ID装载,包含两个尺寸的ID装载,在这两个ID装载中分别有两个样式CLASS,想样式CLASS产生距离效果???OK请设定装载这两个CLASS的ID的MARGIN。

在FF中对CLASS和ID有很清晰的区别对待,而IE则基本上混成一体,你可以针对CLASS设定位置,尺寸,距离,甚至产生与装载相同的功能,这些功能在IE中展现的很好,完全按照你的想法去解释,可惜当你打开FF的时候你才发现,原来这些内容甚至最后连看都看不到,在FF中,定义装载的有装载的用法,定义样式的有样式的用法,非常严谨,因此我反复说,在第一行代码修改的时候就请使用FF作为你的测试工具,哪怕最后在IE中有些许错误,也不会牵扯过多的工作,但是如果你弄反了,哈哈,累死你!

这些问题都来自于独立撰写模版的问题,如果你用些测试过的现成的模版,或者局部弄弄,营造点效果,当然不会有这么大的麻烦,这两天折腾这个模版,也疏于发布文章,看到有朋友问我REAMMORE怎么弄的,当时在评论中回复说改完就忘记了,今天在更新模版看资料的时候才发现,这个功能来自Hackosphere,他的原文名称叫:Expandable posts with Peekaboo view。在页面中有个链接,就是详细源码。这个修改一定要仔细备份原来的模版,有天万一BLOGGER数据结构升级,你原来的代码是怎么样的,哪里找去那?

最后发两句牢骚,现在在搜索引擎随地吐痰的人太多了,东家抄完抄西家,很多技术性的问题在前5页都是一篇文章,有些代码拷贝过来压根用不成,乱七八糟,现象同样存在BAIDU与GOOGLE中,我看中文搜索的路真的很长,顺着搜索引擎指的路过去,八成是垃圾!这些垃圾网站根本不在乎你的感受,他们只要你点击一次就足够了。弄的人不得不多找些靠后的页面认真看看,反而有些收获,你说这是不是很古怪的现象!

7 条评论:

sz-iris 说...

你的Blog越来越专业了哦!
请教下你的功能菜单怎么弄的?我也很想弄一个,谢了哦!

Qiu Xianli 说...

深有同感,最近在找一些东西时,也有碰到你说的前几个结果雷同的现象,不过总的说来,还可以,难以想象没有搜索引擎的情况!

P.S 模版现在已经相当的漂亮了!

请教个问题:如何实现ADSENSE有如这个网页的布局效果?
http://hefee.com/adsense-skill/google-218.html

我查看了下源码,把他的那部分拷贝到Blogger模版里,发布后确不是预想的效果!

不知道可否给解答一下?

GG 说...

火狐下总算看到正常了~

禾草唐楷 说...

#postbody{}文章装载
#POSTAD{FLOAT:LEFT}广告装载
.POSTTEXT{}广告文字

/DIV ID=POSTBODY/
/DIV ID=POSTAD/
/DIV CLASS=POSTTEXT/广告代码
//DIV/
/DIV/
/DIV/
这样试试看看是否可行?弄FF弄出病了,测试的时候也可以试试不要POSTTEXT的CLASS,直接把postad改成CLASS属性,感觉也是可以的。

Qiu Xianli 说...

谢谢,我去试试先!

Ian 说...

我也有同感,那些广告网站太可恶了

Yee 说...

能把Blogger的模版改成这个样式真的很了不起,尤其是正文下面的几个图片更是惟妙惟肖。赞一个!