Blogger beta：页面布局二

发帖者 桃源水榭 on 2009年5月10日星期日 / 标签：

上一个Hack比较适应于那些还未进行过修改的Blog，因为它要替换大部分代码，这样以前的Hacks都会被去掉，对我们是一个不小的损失。Photofool介绍了详细的添加方法，尽管有些烦琐，可是还是值得的。此Hack只适应于两栏模式。结果略有不同。实际效果如这个地址。觉得有必要补充一下，这个Hack会在访问者的计算机上写一个Cookies，保存期限为30天，它会记住浏览者所喜欢的布局。getExpireDate(30)修改括号内的数字就可以修改保存期限。
1.备份模板。无需展开代码。
2.紧跟之前添加以下代码：


3.紧跟之后添加如下代码：

在之前添加如下代码：

4. 用

将Header-wrapper包围起来，
紧跟
之后，
紧在
之前，如红色部分：

5.把content-wrapper用同样的方式包围起来。

如红色部分：

在这一部分里我们还要添加三个区域

，它们都要以
结束。如下面代码：


6.Sidebar-wrapper用

包围起来，如代码红色部分。

7.把Footer-wrapper用

包围起来。如代码部分。





8.最后要向上一篇文章一样去掉各个Wrapper的宽度定义

#header-wrapper {
/*width:660px;*/

#outer-wrapper {
/*width: 660px;*/

#main-wrapper {
/*width: 410px;
float: left;*/

#sidebar-wrapper {
/*width: 220px;
float: right;*/

#footer {
/*width:660px;*/

9.添加一个Html/javascript模块。加入下面代码，像上一篇文章提到的，一共有七种效果，分别是"yui-t1"到"yui-t7"，你可以根据自己的情况选择，这里例出了三种，分别是侧边栏在左侧、右侧和下方。

layout 1|
layout 2|
layout 3



补充：好像改变像Layout1的名字，不能在Html/javascript里修改。可以到代码里，找到Html1 Widgt，再在代码里直接修改Layout1的名字

layout 1|
layout 2|
layout 3

0 评论:

发表评论