Related Posts Plugin for WordPress, Blogger...

2010年3月5日 星期五

Blogger 內隨機輪播 banner

在 blogger 悠遊也一陣子了,也在 template 樣版上 hack 成自己想要版樣,得以舒適輕鬆剪剪貼貼照片,但有時總會再想改版 blogger 面版,而 header banner (標題橫幅背景)就是我之前一直想 hack 的選項之一,我單純地只想讓 banner 圖片能隨機輪播,參考了網路上許多 blogger 專家教學介紹文,決定採用簡單易用且不花時間的,並自己再稍作調整 header 的 css 樣式。

作法如下:

一、準備幾個橫幅 banner 的圖片,像素大小可依據自己 header wrapper 值。
二、上傳圖片至相簿空間,並記下圖片外連的位址。
三、在程式原始碼內 <body> 後放入下面的 code 。

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


code 中圖片網址要自行填入圖片的外連位址,數量以此類推,置中、置左、置右等位置也可調整。這個作法是硬將圖片塞入 header wrapper 區塊間,當成背景圖,所以在網頁元素內,標題圖片不須再上載圖片。

四、調整 header 排列樣式,我是給它定長、寬值,例如:

width: 938px;
height: 280px;


圖片大小最好都一樣,當圖片之像素大小不同,會出現與邊框不對齊,而跑出空白邊。

五、完成。 如對此有疑問,請參考原作者作法,這裡僅是我對自己 blog 的筆記

參考資料:南風部落

ps:
1.banner 圖片中有幾張是網路上抓的,暫時存用,待有照片時再重放入,若有侵權還請告知。

2.在「picasa」相簿中的圖片放置位址中,如:http://lh6.ggpht.com/_95oGH5lzMAI/S4jLWOXpxxI/AAAAAAAAEBg/w6UPDYJAoL0/s640/banner-1.jpg 其中「/s640」這個路徑名稱,可手動調整,改成像 /s144, /s288, /s400, /s800, /s1024, /s1440, /s1600 等,以決定 blogger 中圖片大小,所以它也是控制圖片排列的因素之一。

**補充:Picasa Web 網路相簿中,每本相本都可設定顯示權限,若有重設定,外連網址也會跟著不同,這一點真的要很注意,若你的相片有使用外連,所以最好不要隨便調整顯示權限,有分為公開、知道連結的半公開、僅限本人 三種權限,若有重新設定,它的外連網址會跟著不同,分享一下,以免有些人會覺得莫名其妙,相片怎麼都變叉燒包了~~~ 

3.對 html code 我懂得不多,也不曾想過要懂得多深入,只是邊看邊學,將想要的 hack 用在自己的 blog 中而已,網路上一堆教學文都是值得學習的,可自行搜索參考!!

4.玩 blogger 越久,越覺得 blogger 真的彈性很大,自由度比其它平台更高!! 更重要的是,它無廣告,全程免費。