2006年12月7日星期四

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

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

首先按前文说明将 Navbar 隐藏,然后登陆你的 BloggerBeta 帐户,点击“Template”,在侧栏中增加一个新的 HTML/javascript 部件-“Add a Page Element”。在代码框中输入如下代码:

将代码中的 yourblog 改为你自己的域名,这样你的搜索引擎就已经形成了。

下面我们再将它进行一下优化:
1. 增加maxlength 与 size 参数,(x)与(y)均替换为一个数值。

maxlength 用来指定搜索栏中输入的最大字符数
size 用来指定搜索栏的大小

2. 更改按钮样式
如:








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;
}

即可实现。

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

0 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆