2007-06-17

怎样切换Blogger的CSS主题?

本来在写黑色环保省电节能版的博客的时候就应该把how to实现blogger的css主题切换的步骤写出来,一直偷懒拖到现在。既然Koole又把这个问题提出来,那就写一下具体的做法(这里只介绍怎样做,至于为什么要这么做请参看原作者的文章:Theme Switching With Blogger

第0步:当然是备份自己的模板,没啥说的!

第1步:既然要在不同的CSS主题间切换,当然要准备至少2个不同的CSS主题。你可以将<b:skin></b:skin>(不包括<b:skin></b:skin>)间的CSS代码作为一个主题(复制到任何一个文本编辑器中,另存为1.css),然后在这个文件基础上做一些简单的修改,比如,更换一下背景颜色等等等,另存为2.css,以次类推。

tips: 第二个css文件中只须列出与前一个文件不同的部分。

第2步:将第1步中制作的2个(或者n个css文件)上传到你的网络空间上。然后在<b:skin></b:skin>前添加以下代码:
<link href=‘1.css的url地址' rel='stylesheet' type='text/css'/><link href='2.css的url地址' media='screen' rel='alternate stylesheet' title='light-css' type='text/css'/>

tips: 如上传到google pages上的话,当pages.google.com被封锁的时候,你的blogger网页呈现“裸体”状态(非常不雅观的说)。

第3步:下载styleswitch.js文件,上传到自己的网络空间,然后在第2步的代码后加入以下代码:
<script src='你的styleswitch.js文件url地址' type='text/javascript'>/************************************************ Style Sheet Switcher v1.1- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more***********************************************/</script>

最后,将以下代码放到你认为合适的位置(比如侧边栏):
<a href="javascript:chooseStyle('none', 365)">1号主题</a>
<a href="javascript:chooseStyle('light-css', 365)">2号主题</a>


下面o开始回答大家的问题...

2 个说法:

Alpha No Beta 说...

没做成功,可能有一些误解,1、2.css里包括b:skin么?第二步中这样的话,是不是可以b:skin b/:skin中其他的删除,只要这一段代码就行?
另外还有的问题,归档收缩显示,我按照GG派的这篇文章做的,但是,默认全收缩,怎样默认展开当前月份的。http://ggpi.blogspot.com/2007/02/blogger-30_9540.html
疑问比较多,谢谢解答。^_^

8O 说...

@alpha,

不包括<b:skin></b:skin>,只要其中的css代码。

没研究过gg的文章,不过如果希望默认展开当前月份的帖子,可以使用blogger默认的存档模板,比如o的博客,默认展开本周的帖子

HOW TO: 怎样生成自己的标签云

搜索此博客