2007年2月2日星期五

让BLOGGER模版的SIDEBAR与众不同

Blogger's Template Sidebar Hack

BLOGGER的模版,我是在不断熟悉的过程中逐步改进修饰的,从最开始的一个简单框架到首页的一些修饰到内容页评论页部分的制作,修改一部分会总结一部分心得,也都将这些心得及时的用文字表达出来了,就剩下一个SIDEBAR,今天也算是彻底完成。对于SIDEBAR来说,需要灵活定制无非是打乱它一成不变的一大溜界面,通过类似网页设计中的区块设计来实现一些功能菜单的展示。还是我上次说的:BLOGGER有着非常良好的个性化定义基础,我们缺少的仍然是想象而已。

类似网页的区块SIDEBAR是说,将每个功能区通过三大块来包装,在网页设计中,一般用到的是表格嵌套,用多了CSS后,发现用CSS+DIV仍然可以方便的打造出相同的界面和应用,这个应用是非常方便的,不但可以让自己的SIDEBAR与众不同,同时还保证你随时更新和创造出漂亮展示效果,与原有的单色长溜缺乏发挥的SIDEBAR自不可同日而语,而且有很好的接口,今后需要变更SIDEBAR样式,仅仅是更换三张图片而已。当然有利也有弊,界面改造会用到图片,更多的DIV加载CSS加载也让你的访问速度会有一定的影响,不过,我们今天探讨的是修改方面的体会,与这些方面无关。

功能区通过三块界面来包装指的是什么意思?拿我模版来说,功能区“所有文章”需要用到头部区,中部区和底部区来统一装载。当然如果你仅仅是一个方块单色的话可能就不存在这个问题,但是想他更漂亮,实现更多的界面展示样式并辅之以图片,那一定需要用到这样的方式。比如复杂的园角效果,突出的图片图标效果等等。










我想把图这样放上以后大家就明白了到底是个什么意思,通过这种方式其实可以实现的界面有很多很多,我想需要的是专业的图形设计能力和想象力吧。在SIDEBAR的改造中,头部和底部两块一般不变,中部其实嵌入的是你的真正内容,而中部则是通过CSS定义在Y轴上重复以背景图片的形式来表现的。好了,大的思路有了,剩下的就是动手改造。

我们在以前的文章中说过,修改需要首先定位,定位分为在CSS中定位和在HTML中定位,在我这个模版中管理SIDEBAR的CSS主要有: SIDEBAR-WRAPPER(整个侧栏装载器)SIDEBAR-WIDGET(侧栏内容装载器)以及一些样式定义,诸如:SIDEBAR,SIDEBAR H2,SIDEBAR A等等。HTML的位置在这里:<div id='sidebar-wrapper'>......</DIV>

好了,思路如下:去掉SIDEBAR-WRAPPER的背景颜色定义-CSS设计三块装载代码分别装载三个图片-在HTML中增加CSS调用代码-大功告成。头部装载代码:#SIDEBARTOP{BACKGROUNND:你的定义;}同样继续定义SIDEBARBG,SIDEBARBOTTOM。这一堆代码要是全部弄上来,我感觉这篇文章就要成书了,所以不再废话了,还是老办法最方便省事,下载我的源码说明文件吧!SidebarCode.rar

玩儿着弄的,是否有更好更带劲的思路和方法,本人不得而知,仅供参考而已,目前在IE,FF下貌似正常,欢迎指正并交流心得体会,另外还是说整前先备份!

发布禾草唐楷 禾草唐楷镜像

3 条评论:

sz-iris 说...

呵呵!两天没来,你的Blog又变样了!厉害!很有个性!

sz-iris 说...

很不错的功能菜单!非常棒!

KenShinXF 说...

呵呵,好漂亮啊,好喜欢啊
能把你的模板给我一份吗?我想好好研究一下,谢谢
xuefengwang101@gmail.com