上一个Hack比较适应于那些还未进行过修改的Blog，因为它要替换大部分代码，这样以前的Hacks都会被去掉，对我们是一个不小的损失。Photofool介绍了详细的添加方法，尽管有些烦琐，可是还是值得的。此Hack只适应于两栏模式。结果略有不同。实际效果如这个地址。觉得有必要补充一下，这个Hack会在访问者的计算机上写一个Cookies，保存期限为30天，它会记住浏览者所喜欢的布局。getExpireDate(30)修改括号内的数字就可以修改保存期限。
1.备份模板。无需展开代码。
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"/><script language="javascript" type="text/javascript">
var blogLayout;
function changeStyle(style) {
obj = document.getElementById('doc');
obj.className = style;
setCookie('blogLayout', style, getExpireDate(30), '/');
}
function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie = escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; EXPIRES=' + expires : '')
+ (path ? '; PATH=' + path : '')
+ (domain ? '; DOMAIN=' + domain : '')
+ (secure ? '; SECURE' : '');
}
function getCookieValue(cookieName) {
var allCookies = document.cookie;
var index = allCookies.indexOf(cookieName + '=');
if (index == -1) {
return null;
}
index = allCookies.indexOf('=', index) + 1;
var endstr = allCookies.indexOf('', index);
if (endstr == -1) {
endstr = allCookies.length;
}
return unescape(allCookies.substring(index, endstr));
}
function getExpireDate(nodays) {
var UTCstring;
Today = new Date();
nomilli=Date.parse(Today);
Today.setTime(nomilli+nodays*24*60*60*1000);
UTCstring = Today.toUTCString();
return UTCstring;
}
blogLayout = getCookieValue('blogLayout');
if (null == blogLayout) {
blogLayout = 'yui-t6';
}
</script>
3.紧跟<body>之后添加如下代码：
<script language="javascript" type="text/javascript">
document.write("<div id='doc' class=" + blogLayout + ">");
</script>
在</body>之前添加如下代码：
<script language="javascript" type="text/javascript">
document.write("</div>");
</script>
4.用<div id="hd"></div>将Header-wrapper包围起来，<div id="hd">紧跟<div id="wrap2">之后， </div> 紧在 <div id="content-wrapper">之前，如红色部分：
<div id="hd">
<!-- skip links for text browsers -->
<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='true' title='boyr (Header)' type='Header'/>
</b:section>
</div>
</div>
5.把content-wrapper用同样的方式包围起来。<div id="bd">如红色部分：
<div id="bd">
<div id='content-wrapper'><div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
在这一部分里我们还要添加三个区域<div id="yui-main"> <div class="yui-b">，它们都要以</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='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>
</div>
</div>
6.Sidebar-wrapper用<div class="yui-b">包围起来，如代码红色部分。
<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:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
</div>
7.把Footer-wrapper用<div id="ft">包围起来。如代码部分。
<div id="ft">
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
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"，你可以根据自己的情况选择，这里例出了三种，分别是侧边栏在左侧、右侧和下方。
<a href="javascript:void" onclick='javascript:changeStyle("yui-t6");'>layout 1</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t3");'>layout 2</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t7");'>layout 3</a>
补充：好像改变像Layout1的名字，不能在Html/javascript里修改。可以到代码里，找到Html1 Widgt，再在代码里直接修改Layout1的名字
<div class="widget-content">
<a href="javascript:void" onclick='javascript:changeStyle("yui-t6");'>layout 1</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t3");'>layout 2</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t7");'>layout 3</a>
</div>
7 条评论:
这种东西感觉没有什么用，读者不会无聊到不停的换布局，看文章的话，估计一次都不会换吧？
鱼谢谢你的提醒FireFOX下的确有问题。
先前没注意到兼容性。现在基本修复了。
你看看在你那里还有问题么？谢谢了
多多指教
http://babykenn.blogspot.com
TO 大地
不是每个人都使用1280*1024，一些用1024*768浏览的人就会觉得版面太宽，所以用来这个功能来调整宽度还是很有用
当然，最好是能用JS来获取用户的分辨率，然后自动调整布局
谢谢咖啡鱼的指点... 会seo么??^_^如果会交流一下 我新手^_^
我的Blog：http://botaowu.blogspot.com/
首先感谢咖啡鱼带来的非常有用的hacks.
不过很遗憾的是你使用的页首图片似乎是原作者声明不允许他人使用的.
如果鱼有原作者的允许当然好，如果没有的话，似乎还是以撤下为妥.
hey, although i couldn't read what you wrote, but i'm glad you found my layout chooser mod useful :)
发表评论