色彩斑斓: Blogger beta:页面布局Widget

在Yahoo UI Library中提供了一个Grids CSS,它的功能就是当访问者浏览你的网页的时候可以自定义页面的布局而不用刷新页面。Hoctro把它应用到了Blogger beta中。

修改之前请先保存模板，并建议先在另一个Blog里测试一下。可以在这儿预览一下(点击侧边栏的那七个小图片，就会发现布局的变化)，因为这是鱼的测试Blog，所以经常变动，两天内有效。

1.将侧边栏除“存档”之外的Widget全部去掉，如果没有则添加上。

2.把</head>及之后的代码全部删除，并替换成下面的代码

<link href='http://developer.yahoo.com/ypatterns/scripts/yui/fonts.css' rel='stylesheet' type='text/css'/>
<link href='http://developer.yahoo.com/ypatterns/scripts/yui/grids.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class='yui-t6' id='doc'><div id='outer-wrapper'><div id='wrap2'>
<div id='hd'>

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='css layout (Header)' type='Header'/>
</b:section>
</div> 
</div> 
<div id='bd'><div id='content-wrapper'>
<div id='yui-main'>
<div class='yui-b'><div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div></div> 
</div> 
<div class='yui-b'> <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div> 

<div class='clear'> </div>
</div></div> 
<div id='ft'><div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div></div> 
</div></div></div> 
</body>
</html>

3.把CSS里定义各个容器宽度及位置的代码去掉或者加上/*……*/让它不起作用。如红色标出的部分，一共有五部分。保存模板。

...
/* Header
-----------------------------------------------
*/
#header-wrapper {
/*width:660px;*/
margin:0 auto 10px;
border:1px solid $bordercolor;
}
...
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
/*width: 660px;*/
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
/*width: 410px;
float: left;*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
/*width: 220px;
float: right;*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
...
/* Footer
----------------------------------------------- */
#footer {
/*width:660px;*/
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

4.Yahoo grids提供了七种模式，现在再回到Layout里添加一个Html/javascript模块，在里面加上以下代码。

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t1");' title='yui-t1'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t1.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t2");' title='yui-t2'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t2.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t3");' title='yui-t3'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t3.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t4");' title='yui-t4'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t4.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t5");' title='yui-t5'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t5.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t6");' title='yui-t6'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t6.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t7");' title='yui-t7'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t7.jpg'/></a>
<script language='javascript' type='text/javascript'>
function changeStyle(style) {
obj = document.getElementById('doc');
if (typeof style == "string") obj.className = style;
}
</script>