Google自定义搜索引擎的美化

桑枯海 2013-07-15

展开全文

好几个朋友之前问过我有关Google自定义搜索的美化，问我自定义搜索的朋友大致有两类，一个是嫌程序本身自带的搜索太烂，比如wordpress就是，还有一个是为了赚$，当然这个需要和Google Adense账号绑定，本文不打算介绍这部分内容，因为我的Adense账号不知为何故就被Google告知作弊，然后就莫名其妙的封掉了，我对天发誓，我没有做过弊，账号中仅有的几美元也随之飞灭，从此我对Google Adense失去兴趣。

要自定义Google搜索，首先你当然需要有个Google自定义搜索，没有的同学，可以去这里申请一个，过程超级简单，Google有帮助功能，此处略去数千字。

第二步你需要做的是，拿到Google自定义搜索的代码，在自定义搜索的控制面板的导航中有，我相信你能找到。将Google代码复制到你的文本编辑器中，此处推荐Editplus，找到你的主题的搜索框的HTML代码，如果你没有编辑主题的权限，我也帮不了你。如果是wordpress，编辑主题时没有出现“更新” 按钮，一般是因为权限问题，请将这个主题的文件夹的文件设置成777权限。

第三步，将你刚才得到的Google自定义搜索的代码中

<input type="hidden" name="cx" value="015590816180039829114:vrqilrgmo4k" />
<input type="hidden" name="ie" value="UTF-8" />

加入到你自定搜索的表单中，比如我的是这样：

<form method="get" id="searchform" action="<?php bloginfo("home"); ?>/">
<div><input type="text" value="Search" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go" />
</div>
</form>

加入后就变成这样：

<form method="get" id="searchform" action="<?php bloginfo("home"); ?>/">
<div>
<input type="hidden" name="cx" value="015590816180039829114:vrqilrgmo4k" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="Search" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go" />
</div>
</form

接下来替换form中的action内容，换成你刚才得到Google自定义搜索引擎代码中的action内容，一般简体中文的搜索内容是提交到http://www.google.com/cse，当然你最好还是要看一下自定义搜索引擎代码中的action内容。如果你想跟我一样，在新的窗口或者标签中显示搜索结果，在form中加入target=“_blank”即可。

Google自定义搜索引擎的代码中，最后一般都有一段javascript引用，这里可以完全忽略，它只是用来给自定义搜索打上一个Google版权的水印，如果你想保留的话，那么你form中的id,和input框中的id必须和自定义刚刚从Google得到的代码中完全一致，否则会产生错误。我在Google的自定搜索版权说明中没有看到一定要加这个水印的说明，所以我推荐不要加了，省得麻烦。

我的自定义搜索最后完成的完整代码如下：

<form method="get" id="cse-search-box" action="http://www.google.com/cse" target="_blank">
<div>
<input type="hidden" name="cx" value="015590816180039829114:vrqilrgmo4k" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="Search" name="q" id="s" />
<input type="submit" id="searchsubmit" name="sa" value="搜索" />
</div>
</form>

接下来，你需要做的就是在各位的css文件中定义一下样式，特别提醒一下form、input中的id要和css中的完全一致哦。
我的css样式如下：

#cse-search-box {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(images/searchform-bg.png) no-repeat right bottom;
	height: 37px;
	width: 210px;
}
#cse-search-box #s{
	background: #ffffff url(images/form-field-bg.gif) no-repeat ;
	height: 17px;
	width: 148px;
	margin: 6px 5px 0px 10px;
	padding: 3px 7px 2px 5px;
	color: #999999;
	border: none;
}
#cse-search-box #searchsubmit { 
	background: url(images/search-btn.png) no-repeat left top;
	height: 24px;
	width: 24px;
	border: none;
	text-indent: -999%;
	line-height: 1px;
	margin-top: 6px;
}