blogger：如何为Blogger Beta增加站内搜索功能

如果你正在经营一个长期的博客，随着文章数量的不断增加，在你的网站上如果没有一个文章搜索功能的话将会变得很不方便。幸好我们有很多方法可以轻松的解决这个问题，比如由各大搜索引擎提供的个人搜索服务，如： Google 或百度 。还有很多面向博客和个人网站群体推出的搜索服务，如： Rollyo 或 Swicki 等等。你完全可以根据自己的需求，选择其中的一款使用，但这些都不如博客自身所提供的站内搜索来的方便。其实，在 Blogger Beta 版本中开发人员已经为我们提供了一个相当完善的站内搜索引擎，在哪？其实它就在博客最上方的 Navbar 里。但在前文里我们已经将 Navbar 隐藏了起来，那能不能把这个搜索框转移到我们的侧栏里呢？当然是可以的，本志就是个例子。下面就来讲一下它的具体操作。

首先按前文说明将 Navbar 隐藏，然后登陆你的 BloggerBeta 帐户，点击“Template”，在侧栏中增加一个新的 HTML/javascript 部件－“Add a Page Element”。在代码框中输入如下代码：
<form action="http://yourblog.blogspot.com/search" style="display:inline;" id="searchthis" method="get"><br /> <input type="text" id="query" name="q" /><br /> <input src="http://beta.blogger.com/img/navbar/4/btn_search_this.gif" alt="Search This Blog" type="image" id="searchbtn" title="Search this blog" /><br /></form>
将代码中的 yourblog 改为你自己的域名，这样你的搜索引擎就已经形成了。

下面我们再将它进行一下优化：
1. 增加maxlength 与 size 参数，(x)与(y)均替换为一个数值。
<input type="text" id="query" name="q" maxlength="x" size="y" />
maxlength 用来指定搜索栏中输入的最大字符数
size 用来指定搜索栏的大小

2. 更改按钮样式
如：


<input src="http://beta.blogger.com/img/navbar/4/btn_search_this.gif" alt="Search This Blog" type="image" id="searchbtn" title="Search this blog" />



<input type="submit" id="searchbtn" value="Search" />

3. 由于不同浏览器下对HTML语法的解释不同，所以会造成搜索框的大小不一，在 Firefox 下会显得比较大。这样的话我们还可以通过 CSS 来限定它的格式。在你的 CSS （Template > Edit HTML > ）中添加如下代码：

#query {
  width:125px;
  border:1px solid #999;
  background: #fff;  
}

#searchbtn {
  border:1px solid #999;
  background: #fff;  
}

width 限定搜索框的宽度，border 限定边框的形式及颜色，background 限定背景的颜色。
你还可以通过自己对的 CSS 的了解设定自己独有的样式。

4. 最后也许你还想将 Navbar 恢复，让他与侧栏的搜索框并存，这时只需在你的 CSS （Template > Edit HTML > ）中添加如下代码：

#navbar2 {
  display:block;
  position:relative;
}

即可实现。

希望上文对你有所帮助，如有任何疑问可留言告知，我会尽快给予回复。