Shakedown 1985

其他平台的 blog banner 隨機更變語法用 google 找就找得到了。但找之前關鍵字請記得打上你所使用的 blog 平台（誠心建議），別像我耍白拿 blogspot 的語法在 pinxet 改半天就是沒有動作或是頁面像被鬼打到似的（囧）。

藍字部份是我現在使用的版面會碰到的問題，以及其他有的沒的補充，沒事看看，看看沒事 。

打開 CSS 編輯器 －－ 通常放置 banner 的語法區域是 #banner or #header，每個 blog 用的語法不盡相同，但只要找放置 banner 圖網址的那一區就對了。接著將 #banner 下方所出現的 background:url(圖片網址) 改為 background:#none;，或是直接去掉這一行。

以我用的版面來說，CSS 碼為：

#header {
float:left;
position:relative;
width:100%;
height:130px;
background:url(相簿網址) right top no-repeat;
background-image:url(原固定 banner 圖片網址);
background-position:top right;
background-repeat:no-repeat;
margin:0 0 7px;
}

相簿網址改為 #none 後會造成右邊側欄往上移，跟 banner 連在一起；下一行的原固定 banner 圖片網址裡的圖片也會先出現，之後再變換成隨機出現的圖。要避掉這個麻煩，直接將 background:url 跟 background-image:url 這兩行刪除就好。

接著將以下語法放進「公告區域」、「部落格描述」，或是「自訂欄位」。

<script type="text/javascript">
var banner= new Array()
banner[0]="圖片網址"
banner[1]="圖片網址"
banner[2]="圖片網址"
var random=Math.floor(banner.length*Math.random());
document.write("<style>");
document.write("#banner  {");
document.write(' background:url("' + banner[random] + '") no-repeat center center;');
document.write(" }");
document.write("</style>");
</script>

如果要增加圖片，只要在語法裡再加上 banner[]="圖片網址" 就好。 [] 裡的數字請記得每增加一張圖片就 +1。#banner { 這一部份，請看你的 blog 裡所用的 banner 圖語法是哪一個，找到後改成一樣的。以我的來說，就是將 #banner { 改成 #header {。記得要一致，不然沒辦法使用。 

document.write(' background:url("' + banner[random] + '") no-repeat center;'); 這一行是控制圖片的位置。no-repeat 指圖片不重覆。center 指 banner 置中。要改成顯示在左邊 or 右邊，只要改成 left or right 就行。center 可以控制顯示圖片的上方（top）、中間（center）或下方（bottom），不打的話圖片會直接顯示中間。基本上如果 banner 圖是佔一整區，那這三個語法就不用特別注意，特別是紫色部份不用打也沒關係，只是我的圖剛好可以用這些語法修改位置 = 3 =

然後經由胖葛一說，我才想到那個被我丟在一旁的憨及 XD。興沖沖的跑去試了一下，上面的語法也可以使用。只是要注意的仍然是放置 banner 圖的 CSS 語法。一樣以我用的版面為例，CSS 語法為：

#banner {
BACKGROUND-POSITION: right top;

BACKGROUND-IMAGE: url(原固定 banner 圖片網址);

BORDER-LEFT: medium none;

WIDTH: 960px; BORDER-BOTTOM: medium none;

BACKGROUND-REPEAT: no-repeat;

HEIGHT: 148px; BACKGROUND-COLOR: #ffffff;

一般來說要刪 BACKGROUND-IMAGE: url(原固定 banner 網址); 這一行，不過我刪了之後 banner 圖片還在，如果是這樣，請繼續往下找含有 banner 圖網址那一區。一樣以我的為例，底下還有另一行 DIV#banner：

DIV#banner {
BORDER-RIGHT: medium none; BORDER-TOP: medium none;

BACKGROUND-IMAGE: url(原固定 banner 圖片網址);

BORDER-LEFT: medium none;

BORDER-BOTTOM: medium none; HEIGHT: 440px;
}  

把 BACKGROUND-IMAGE: url(原固定 banner 圖片網址); 這一行刪掉就好（原先上面 #banner 那一行不刪也沒關係）。剩下的動作一樣，將 document.write("#banner  {"); 藍底裡的字改成 DIV#banner {，語法放在「部落格描述」or「自訂欄位」就行了。