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服务器非常不稳定,经常不容易保存模板。
没有评论:
发表评论