Blogger 改Banner教學(部分轉貼)

在Blogger的樣式中則是標示為"Header"，所以要改版頭，就要先找到標題為"Header"的這一塊。

所以在修改HTML的樣式表裡面也不會有圖片的語法，這時就要自己把它放進去，之前是把Pixnet樣式表的那一段插入背景圖片語法複製下來，如下圖所示（點圖可放大）再貼進Blogger的樣式表裡:



用粉紅色框起來的那一區，就是原本沒有，而作者把它加上去的東西。

在這個語法中，網址當然就是你想放在版頭的圖片網址（可以先把圖片上傳到Blogger有附送的Picasa相簿，或是任何可以外連網址的相簿），height是調整版頭的高度，數字可以隨便你填，right top是讓圖片置右上角，如果你要讓圖置中就寫center，置左就改成left，置底就寫bottom，置頂就寫top，如果是置右下或左上之類的就以此類推。

至於no-repeat就是圖片不重複，想讓圖片重複的話就把前面的no-拿掉，如果想讓圖片垂直重複則是repeat-y，水平重複則為repeat-x。


而我的範本又有所不同，只好大着膽子稍作改試試如下

原本的HTML設定：


#header-wrapper {
background: #476 url("")repeat $startSide Top;
margin-top:22px;
margin-$endSide;0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor:
}
#header {
background:url("圖片網址") no-repeat $startSide bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}


改成如下的HTML：


#header-wrapper {
background: #476 url("")repeat $startSide Top;
margin-top:22px;
margin-$endSide;0;
margin-bottom:0;
margin-$startSide:0;
padding-top:0px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor:
}
#header {
height:236px;background:url(圖片網址)
right top no-repeat;
padding:0 0px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font:$pageTitleFont;
}


height:236px; (即是圖片高度-可以改的)，我省去了width:(即是圖片寛度)，只要banner圖和版面的一樣可免。

好了，事情終於搞定了，此文章希望能幫到大家。