如何將標題(頭)分兩欄，加入網頁元素

昨天綸太郎將另一個網站，東京封印，換新的模板，發現一個新技巧，和大家分享。

以Blogger一般的規格而言，標題(標頭)通常佔了最上方一列的位置，如下圖這樣，


但是總覺得可否有些新變化，讓標題只佔了一部分，其他部分可以拿來貼圖片或是放其他的網頁元素，以我而言，當然就是可以放廣告或是最新訊息之類的，因為很多模板設計都有如此格式，最近試了一些模板，但是都會出現黃色三角形的錯誤訊息，因為也找不到錯誤的地方，無法修正，只好自己修改原有的模板加以應用，參考了網路上BlogU（部落格大學）的教法，終於把自己的網站弄成可以在標題欄加入其他網頁元素的格式了。


如何做呢？首先找到#header-wrapper的定義，然後將他分成兩部分，一個在左，一個在右
記得原先的模板要先備份
原來的
#header {
margin: 5px;
border: 1px solid #000;
text-align: center;
color:#ccc;
}

以一般為1024*768的寬度而言，可換成
新的
#header {
width: 300px;
float: left;
margin: 5px;
text-align: left;
color:#ccc;
}
#header-right {
width: 600px;
float: right;
color: #ccc;
margin: 5px;
padding: 5px;
}


然後記得不要展開小裝置範本，不然會找不到下列語法


，然後將原先的
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>


改成
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

就是多加入紅色這兩段敘述

再儲存範本即可。

其中width的寬度可以自行設定，但記得如果你的元件高度不能超過header-wrapper所設的高度，自己再加以調整，如下方標頭分成兩部分。


我把他放上了博客來的廣告(如下圖)，你也可以放上Google AdSense 468*60大小的廣告，隨時都可變動，但如果你的背景是圖片式的就不太適合，會把圖片擋住，視自己需要再做變化。



參考來源：
Add a Widget Beside Your Header