此Hack（via Gabriel Lau）在每次刷新页面时随机显示页首的Banner，是不是很酷呢？这是Wordpress里一个默认的插件，现在我们也可以在Blogger beta里体验它了。
1.首先要备份你的模板，这是很重要的。另外你要为你的Blogger制作几张适合你的Blog的图片，并上传到一些图片服务器上。下面的以“Rounder4”这个模板为示例，不同的模板可能不同，因为有一些模板并没有Banner，或者位置不同，请做相应的修改。
2.先来看一下在CSS里定义Header背景的部分。这一部分不同的模板可能不同。
#header {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}
3.我们要做的就是用脚本重写background url，把下面的代码<body>之后。
<script type="text/javascript">
var banner= new Array()
banner[0]="图片地址1"
banner[1]="图片地址2"
banner[2]="图片地址3"
banner[3]="图片地址4"
banner[4]=“图片地址5”var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
4.自定义部分。注意用红色标出的数字，如果你有N张图片，那么红色数字应该为N-1。比如这儿有5张图片，那么值为4。
5.一些补充。Blogger beta中头部CSS中以Header-wrapper来定义其样式，默认它有一个角，所以鱼把Header-wrapper去掉了，这样更和谐一些，如果你的图片比较大，可以用Height属性来定义头部的高度。如鱼用的：
#header{
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif%22) no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
height:200px; }
最近好像Blogger服务器非常不稳定，经常不能保存模板。很浪费时间
){kind=link}
3 条评论:
要是能够随机显示标题栏的flash就更好了~~~
就像http://guostone.blogspot.com/
那样，不过每次出现不同的flash，蚂蚁，雨点，落叶，那样就太爽了~~~
这个随机更换的方法好像不管用啊～
每次写进去编码 页面就完全被毁了……
所以只能做到放上去一张图片而已
哇大感谢 成功了也^^d
不过我是在边条栏的js框里调用的 没有放到模版里面
谢谢。。。
发表评论