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樣版, 玩壞了也沒關係, 復原就好了@@

我要引用 Trackback:

Blogger 使用者專用:
Trackback 引用網址: http://mymagicalstar.blogspot.com/2007/10/blogger-templates-xml-3.html
本 著作 除非另行註明 其它皆採用創用 CC 姓名標示-非商業性-禁止改作2.5台灣授權條款授權