Blogger Templates XML 修改教學：神鬼奇航3

今天我在Yahoo! 知識+ 看到一位使用非官方Blogger Templates出問題, 在套用非官方Blogger Template XML後, 竟然出現一大塊黑色區域, 笨貓查看XML後, 將欲改善的步驟列於下表 ##ReadMore##
《一、問題》

原圖：正常的樣子

問題圖：黑色的部分是連結失效的影片

《二、原因》
　　因為原Blogger Templates At World's End, Pirates of the Caribbean 3 template神鬼奇航3：世界的盡頭有加上電影預告, 在下映後, 原網址影片連結失效了, 所以Blogger頁面會出現一片黑

《三、解決方法教學步驟》

　1.找出影片的程式碼：
　　a.Blogger後台中選擇範本>修改HTML>打開右上角的"展開小裝置範本"
　　b.找出以下的程式碼, 並將紅色部分刪除
<div id='header-wrapper'>
<embed FlashVars='videoUrl=http://progressive.totaleclips.com.edgesuite.net/100/b10000_b3e.flv&amp;thumbnailUrl=http://aycu27.webshots.com/image/16466/2005631985858120883_rs.jpg&amp;playerMode=mini&amp;hl=en;' allowscriptaccess='sameDomain' src='http://video.google.com/googleplayer.swf' style='width:760px;height:304px;' type='application/x-shockwave-flash'/>
</div>

刪除影片的結果

　2.調整版面：

　　a.移動header-wrapper：
　　因為原影片Moive程式碼置於Blogger的header-wrapper部分, 故刪除程式碼後, 整個content-wrapper(main-wrapper和sidebar-wrapper)都往上移, 並且擋住神鬼奇航3：世界的盡頭標題, 所以接下來要把header-wrapper往下移
找出以下的程式碼, 並將紅色部分改成175px
#header-wrapper {
margin:15px 0 0;
padding: 0;
text-align: center;
}

header-wrapper往下移的結果

　b.移動header Blogger 標題：
　　原樣版將Blogger標題置於sidebar-wrapper側邊欄, 所以我們把Blogger標題改移至最上方
　　一樣找出以下的程式碼, 並剪下紅色部分
<div id='sidebar-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格標題 (標頭)' type='Header'/>
</b:section>

　　將剪下紅色程式碼貼於藍色部分的下方, 完成如下的Html：
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格標題 (標頭)' type='Header'/>
</b:section>
</div>

修改完成了！

　補充說明：
　　Blogger的好處是一個帳號可以申請一堆Blog, 所以除了主要Blog外, 建議申請一個測試用的Blog, 這樣就隨你修改Blogger Templates XML樣版, 玩壞了也沒關係, 復原就好了＠＠