2009年3月27日 星期五

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


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

以搜尋框的製作而言,一般有分兩種,一種是單純在你的部落格裡搜尋相關關鍵字的文章,另一種則是你有申請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個字,太多字會把搜尋按紐推到下面。

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

6 則留言:

  1. 成功了,感謝您的分享....

    回覆刪除
  2. 那个程式代码不是能直接用的,需要把代码中的“”全部换成' '才行

    回覆刪除
  3. 我將AFS放上後,系統會直接將""換成'',所以不用修改,我不知道為什麼你的不行。

    回覆刪除
  4. IE6測試留言發表狀態。

    回覆刪除
  5. 您好 有一個問題想請教您 我該怎麼讓下面這段程式碼的照片自動播放(能讓它一直換照片)[script src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=y&source=user&user=YOUR-FLICKR-ID" type="text/javascript"/][/script] 謝謝

    回覆刪除
  6. 抱歉,我不會用Script語法。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能