Blogger beta:技巧:随机显示页首图片(Banner)

此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服务器非常不稳定,经常不能保存模板。很浪费时间

3 条评论:

匿名 说...

要是能够随机显示标题栏的flash就更好了~~~

就像http://guostone.blogspot.com/

那样,不过每次出现不同的flash,蚂蚁,雨点,落叶,那样就太爽了~~~

Elle.Lanata 说...

这个随机更换的方法好像不管用啊~
每次写进去编码 页面就完全被毁了……
所以只能做到放上去一张图片而已

takastyle 说...

哇大感谢 成功了也^^d

不过我是在边条栏的js框里调用的 没有放到模版里面

谢谢。。。