黄聪：让wordpress模板完全整合google AdSense搜索广告

转载

mb5fe55acf14b1a 2010-03-31 20:30:00

文章标签 搜索原代码代码段 css 文章分类 Html/CSS 前端开发

wordpress中自定义AdSense搜索广告的示例

正确生成AdSense搜索广告代码。这里有几处需要注意的内容：（以下全部假设博客网址为http://www.qiuworld.com）
选定的网站：指定要搜索的网站或网站列表时填写自己博客的网址，如：http://www.qiuworld.com。
打开搜索结果页：选择在“我的网站上打开搜索结果”选项，并输入显示搜索结果的网址，如：http://www.qiuworld.com/search/
下载并安装Google Custom Search Plugin，将生成的代码分别填入该插件的设置（Google Custom Search Configuration）页的Search Box和Search Results当中。搜索框代码填入Search Box当中，搜索结果代码填入Search Results框当中。并保存更改。
寻找到原模板当中的搜索框代码段，使用google搜索广告生成的代码替换原代码。并将搜索广告代码放入以search-form命名的层内。示例如下：
<div class=”search-form”>
<form action=”http://www.qiuworld.com/blog/search/” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”partner-pub-3900138411736885:i29mpk-hll4″ />
<input type=”hidden” name=”cof” value=”FORID:10″ /> <input type=”hidden” name=”ie” value=”GB2312″ />
<input type=”text” name=”q” size=”60″ />
<input type=”submit” name=”sa” value=”搜索” />
</div> </form> <script type=”text/javascript” src=”http://www.google.com/cse/brand?form=cse-search-box&lang=zh-Hans”></script>
</div>
使用CSS文件控制搜索表单的显示。示例如下：
/************************************* +Search form *************************************/
.search-form {
font-size:1.2em;
background:url(images/search.png) no-repeat;
position:relative;
width:147px; height:44px; margin-bottom:10px;
}
/****************这里设置了搜索输入框的宽度，边距，边宽以及背景色******************/
.search-form input{
width:125px;
margin:14px 0 0 10px;
border:0px;
background:#f9f9f9;
color: #454545; }
/******************用于隐藏输入提交按钮*******************/
.search-form input[type="button"],.search-form input[type="submit"]{
display: none;
border: none;
color:transparent;
}