如何在Blogger Beta中插入橫幅圖片

1.要在Blogger Beta中插入橫幅圖片時，點選[範本]>>[修改HTML]，找到Header的語法如下：

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

把 maxwidgets='1' 改成 maxwidgets='4'(或其他大於1的數字)，並把showaddelement='no' 改成 showaddelement='yes'。(若將maxwidgets=''的數字欄留白，就可以加無限個Header) 修改後的Header與法如下：

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

確認無誤後點選[儲存範本]，就會在Header之上看見一個[加入網頁元素]的連結，就可以準備加入圖片了。。

2.接著到[範本]>>[網頁元素]>>[HTML/JavaScript]，按[加入BLOG]，將標題欄維持空白，並將以下這一行語法加入內容欄：

<a href="首頁網址"><img alt="想讓搜尋引擎找到的關鍵字" src="橫幅圖檔位置"/>

3.點選原來標頭(Header)這個網頁元素的[修改]>>[移除網頁元素]，將原來的標頭給移除。
4.若覺得橫幅的圖片高度和部落格上方的色塊有落差想調整時，就從[範本]>>[修改HTML]，去找

文繞圖之測試

這是我和爸爸第一次出國，目標當然是好玩的香港迪士尼樂園了。從來沒出國的我，能和心中的偶像巴斯光年照相，真是酷斃了。
哇，Yahoo奇摩部落格竟然不能文繞圖，也限制只能上傳*.jpg檔，還是Google Blogger加減用。

Blogger beta基本改造流程

1.改用可相容於Blogger Beta的3欄版型：
1-1.以3 column template blogger beta為關鍵字搜尋，最後在
http://hackosphere.blogspot.com/index.html找到3欄模型，下載其*.xml格式的版型檔，接著從[Template]>>[Edit HTML]，上傳板型並透過[Page Elements]所見即所得與[Edit HTML]輸入語法等兩種方式進行版型的各項修改(如文字與背景的顏色、中文化、新增自訂區塊內容等等)。
1-2.若要調整顏色可以使用[色胚子]這個調色軟體，參考其它優秀的部落格版型來修改。
1-3.為了讓版型能使用Blogger Beta中[Page Elements]所見即所得的編輯方式，若想在版型的HTML語法有所改變時，可開啟幾個Blogger Beta的部落格版型同步參考修改，才不會改了版型而無法使用方便的[Page Elements]所見即所得的編輯方式。
1-4.若以HTML語法修改版型時，要勾選[Expand Widget Templates]，才能看見較完整的HTML內容(下載完整版型的內容是最完整的內容)；修改時可先讓游標停在[Edit Template]內HTML語法方框內，然後從瀏覽器的[編輯]>>[尋找這個畫面的資料]直接找所要的關鍵字快速修改。

2.進行基本設定：
從[Settings]進行各項基本的設定，雖然都是英文但是應該都看得懂。

3.改完瀏覽後直接回上一次繼續修：
修改後瀏覽完，隨時可回到上一頁繼續改，不用擔心沒有存檔，因為Blogger Beta不必像Blogger一樣得重新發佈才算修改完成，只要按了[Save Settings]鍵或[PUBLISH]鍵就可儲存修改或文章發佈的內容。

4.隨時筆記並將版型下載備份]：
改造期間把重要關鍵字或流程記下，而版型若改到一定程度，可以下載回自己的電腦備份。

使用Page Elements新增範本的橫幅圖案

1.讓原範本上方之橫幅文字欄可新增自定內容(Add a Page Element)：
由[Template]>>[Edit Html]，進入範本的HTML語法後，找到以下語法
=================================
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
=================================
然後改成
=================================
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
=================================
此時從[Template]>>[Page Elements]進入後就會看到原範本上方之橫幅文字欄上方多了一欄[Add a Page Element]，可以新增自訂內容。

2.刪除原範本上方之橫幅文字欄並新增橫幅圖案：
由[Template]>>[Page Elements]，點選範本上方橫幅文字欄上方多了一欄的[Add a Page Element]，
就可以上傳圖檔或提供連結網址的方式新增橫幅圖檔。