九個步驟改變Blogger Beta的Logo圖

如果你也是使用Google的Blogger beta建製部落格
或許也會跟SonyChuck一樣
想要將上方的"Somebody's Blog"換成漂亮一點的圖形
將步驟條列如下,做個記錄,也給需要的人參考:
===================== 中文版本 =====================
1. 管理頁面->範本->修改HTML
2. 尋找h1.title,替換成下面的程式碼,將原本的"Somebody's Blog"清除:
h1.title {
margin:0;
font-size:2%;
line-height:1.2em;
font-weight:normal;
color:#ffffff;
text-align:center;
text-transform:uppercase;
letter-spacing:.2em;
}
3. 找尋<data:title/>,這個就是部落格放置Logo的點,屬於所謂Title的區域
4. 在可以找到的兩個<data:title/>後面,各加上<span/>標籤
5. 找尋#header,可以看到#header{}使用怎樣的方式,去描述header的屬性
6. 現在我們要在#header{}後面加上新的header的span屬性:
#header span {
display:block;
top:0;
width:900px;
margin-top:0px;
margin-right:auto !important;
margin-left:auto !important;
z-index:1 !important;
height:120px;
background:url("此處填寫Logo圖片的網路位置") no-repeat;
cursor:hand;
}
7. 上面請將寬度(width),高度(height)調整成配合Logo圖片的大小.margin-top為圖片上面的橫移空間,也請識需要調整
8. 用[預覽]看結果
9. 大功告成!

在預覽沒有成功秀圖之前請別儲存,以免發生無法復原的意外~~
以上參考
http://weblensblogs.blogspot.com/2006/01/blogger-template-hacks-putting-logo-in.html
並做了適度修改.

===================== English Version =====================
Nine steps to change your logo in Blogger Beta

1. Blogger->Template->HTML
2. Search for "h1.title" and replace the code as following. We are going to remove "Somebody's Blog":
h1.title {
margin:0;
font-size:2%;
line-height:1.2em;
font-weight:normal;
color:#ffffff;
text-align:center;
text-transform:uppercase;
letter-spacing:.2em;
}
3. <data:title/> is where blogger beta puts its logo. Find the tag in the code.
4. You will find two <data:title/> tag in your code. Add <span/> tag just after each <data:title/>.
5. Find #header, and you can see how #header{} describe the hearder style.
6. Now we are going to manipulate the new header-span style. Put the following code just after #header{}:
#header span {
display:block;
top:0;
width:900px;
margin-top:0px;
margin-right:auto !important;
margin-left:auto !important;
z-index:1 !important;
height:120px;
background:url("your logo domain and filename") no-repeat;
cursor:hand;
}
7. Modify width, height attributes to fit your logo size. Margin-top is the shifting space above your logo.
8. Preview
9. Accomplished!

Reference to http://weblensblogs.blogspot.com/2006/01/blogger-template-hacks-putting-logo-in.html with proper modification.