2009年2月15日星期日

随机显示页首图片(Banner)

此Hack在每次刷新页面时随机显示页首的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服务器非常不稳定,经常不容易保存模板。

没有评论: