v 在導覽工具列上放置搜尋框 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...