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;
}
这样基本就设置完毕了。
本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/archive/2010/03/31/1701701.html,如需转载请自行联系原作者