在導覽工具列上放置搜尋框

上次有提到在部落格名稱下方放個水平連結導覽列，其實很多模板的設計在這裡會在右方加個搜尋框，當你的文章多的時候，這個搜尋框也就能派上用場了。

以搜尋框的製作而言，一般有分兩種，一種是單純在你的部落格裡搜尋相關關鍵字的文章，另一種則是你有申請Google AdSense會提供的AdSense for Search工具列，兩種都可以放在你的部落格上，因為綸太郎有申請GA，當然就是放是AFS的工具列了。

通常我們都是用新增小工具，將搜尋框放在邊欄上，而綸太郎下面所分享的這個做法是直接放在導覽工具列上，一來節省空間，二來也感覺比較專業些。

如何製作呢?
一樣以官方模板的Stretch Denim來示範，當然前提是你已經裝了導覽工具列，如果你沒有裝，建議先看了此篇文章後，再來看這篇，會比較了解綸太郎在說些什麼，

兩種語法不太一樣，先說一般的搜尋列，

一、增加一般搜尋列在工具導覽列上


首先一樣是備份的你模板，然後版面配置→修改HTML，不用展開小裝置範本，然後加入以下搜尋列的CSS外觀語法，將這段語法放在Menu區下方即可。

我將搜尋列的外觀定義為Search區，
/*Search
---------------------------------------*/
#search {
height:26px;
width:290px;
float:right;
padding:0;
}

#search form {
margin: 0 auto;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
margin-right:2px;
float: left;
width:200px;
padding: 1px 8px;
background:#eee;
border:1px solid #fff;
font: normal 100% Arial, Helvetica, sans-serif;
color:#422108;
}

#searchsubmit {
margin-right:10px;
margin-left:1px;
float: right;
margin-top: 0px;
background: #5f5f5f;
border: none;
font: normal;
color: #FFFFFF;
height:26px;
width:50px;
line-height:26px
}

其中
#search，整個搜尋區塊的定義
#search form，是搜尋框的定義
#s，是你要打入搜尋框裡的關鍵字的區域
#searchsubmit，是按下"搜尋"，這個按紐button的定義

這些高度、寬度、邊界大小與顏色，都可以視你的版面做調整，也可以加入背景圖片，感覺更漂亮些，都可以自行設計，目前我是使用最簡單的作法。

然後找到上次我們HTML所加的MENU區，將以下語法插入</ul>和</div>之間
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' value='搜尋'/>
</form>
</div>


如上圖，就是在Menu這區要結束的語法</div>前插入搜尋框的html語法。

這樣就完成了，如果你的按下鈕不要使用"搜尋"兩字，可以在上面value='搜尋'，改成你要的文字，如"Search"或是"按下搜尋"都可以。

二、將AdSense For Search放到導覽工具列


這個語法比較少，因為官方已經定義了某部份元素，所以我們只要下兩個定義(搜尋區塊，搜尋框)即可， 你可以發現我已經將width:290px; 這個語法拿掉，因為AFS是根據你的字數來訂寬度的，以20個字為宜。

/*Search
---------------------------------------*/
#search {
float:right;
line-height: 24px;
margin-right:10px;
padding:0;
}
#search form {
margin: 0 auto;
padding: 0;
}
跟上面一樣，找到MENU區，將以下語法插入</ul>和</div>之間
<div id='search'>
你的AdSense for Search的程式碼
</div>
記得Google AdSense給你的程式碼是不能隨便變更的，所以你只要放入就好了，不要自己再修改語法，搜尋寬度最好是設20個字，太多字會把搜尋按紐推到下面。

另外或許有人想在部落格標題區，加入搜尋框，可以參考綸太郎以前寫的
如何將標題(頭)分兩欄，加入網頁元素，可以新增小工具，然後將搜尋框的語法放進也可以達到這樣的效果。

模板語法參考來源：D’Bluez | Blogger Templates
延伸閱讀：
Blogger template模板教學課程---概說及基本結構