为jimdo网站添加、美化站内搜索工具

        有些日子没有更新jimdo博文了,以前写过《Google和百度站内搜索代码(乱码修正)》和《Google和百度搜索框代码(已修复乱码问题)》,站内搜索可以大大方便用户查找自己想要的内容,网站上有这么个东西感觉很有必要,虽然搜索功能上基本没有什么提升空间了,但是外观上是可以修饰和美化的!我写这篇文章就是要谈谈美化和修饰网站的站内搜索工具,先上一张诸葛草帽电脑工作室的站内搜索截图:

google和百度搜索框代码

        其实我的这个站内搜索是我仿照jimdo官网上的搜索做的,核心是借用谷歌站内搜索,因为众多搜索引擎中谷歌是收率比较快、收率量也相对较多、实力很强的搜索引擎,说到这里不得不提一下百度,百度封了jimdo域名,一想就来气,所以站内搜索我永远都不会调用百度(气话、气话^_^)!

        先写出原来的站内搜索核心代码(详细参见google和百度站内搜索代码-乱码修正):

<form method="get" action="http://www.google.com/search" target="_blank">
<input type="text" name="q" />

<input type="submit" name="btnG" value="Google 站内" />

<input type="hidden" name="ie" value="UTF-8" />

<input type="hidden" name="oe" value="UTF-8" />

<input type="hidden" name="hl" value="zh-CN" />

<input type="hidden" name="domains" value="zhugecaomao.jimdo.com" />

<input type="hidden" name="sitesearch" value="zhugecaomao.jimdo.com" />
</form>

        将这段代码中的红色部分zhugecaomao.jimdo.com换成你自己的网址,jimdo网站使用这个代码搜索时不会出现乱码现象。我现在的站内搜索用的是自己修改的谷歌自定义搜索引擎,使用谷歌自定义搜索引擎比上面那个简单代码更加强大,我为这个站内搜索特别建了个网页:http://zhugecaomao.jimdo.com/google ,把搜索框放在了导航栏中右侧,搜索结果显示在那个网页上面,各位可以搜索下试试,直接给出我的代码供参考吧:

 

搜索框html代码:

    <div id="search">
        <form action="/google">
            <span class="searchbox"><input type="hidden" name="cx" value="006564264524165290384:qlpwedfazb0" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie"
            value="UTF-8" /> <input type="text" name="q" id="q" /> <input type="image" class="submit" src="submit.gif" alt="给我搜" /></span>
        </form>
    </div>

结果显示页html代码:

    <div id="cse-search-results">
    </div>
    <script type="text/javascript">
//<![CDATA[
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 600;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse";
    //]]>
    </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
</script>

css代码:

#search{width:190px;float:right;z-index:1;position:absolute;right:0;top:0;}
.searchbox{position: relative;background:url("http://u.jimdo.com/www24/o/sea6d17695a9c2b53/userlayout/img/searchbox.png?t=1281750422") no-repeat;float: right;height: 27px;margin-top:66px;margin-right:0;width: 185px;}
.searchbox input{border:0;background-color: transparent;}
.searchbox input#q{font-size: 12px;height: 14px;margin-bottom: 0px;margin-left: 10px;margin-right: 0px;margin-top:5px;}
.searchbox input.submit{position:absolute;right:10px;top:0px;}

        如果你有谷歌帐户,不妨自己制作一个谷歌自定义搜索引擎,这样你会得到一个你的搜索引擎唯一识别码,上面搜索框html代码中蓝色的部分,可以直接使用谷歌提供的几种搜索框样式,或者修改一下我代码中的识别码,这样你就拥有和我这个一样的搜索框了,这个搜索框使用了绝对定位,修改下定位位置到你认为比较合适的地方,之后将结果显示代码添加到想显示结果的页面即可。

Write a comment

Comments: 18
  • #1

    1980网络技术 (Tuesday, 14 September 2010 00:14)

    诸葛草帽的技术好强, 从您这里学到了不少东西.

  • #2

    诸葛草帽 (Tuesday, 14 September 2010 06:54)

    回复1980网络技术:过奖了,我对电脑方面只是兴趣爱好,贵站的电脑知识好全面啊

  • #3

    Suitear (Tuesday, 14 September 2010 18:33)

    观赏了!

  • #4

    诸葛草帽 (Thursday, 16 September 2010 19:28)

    回复Suitear:感谢来访,欢迎常来!

  • #5

    独星 (Friday, 17 September 2010 18:47)

    貌似很复杂的样子,如果可以加背景图片就爽了~~

  • #6

    诸葛草帽 (Friday, 17 September 2010 21:37)

    回复独星:其实我的这个搜索框实质上就是加了个背景看着比较舒服罢了

  • #7

    网型网秀 (Thursday, 23 September 2010 11:15)

    不错不错!

  • #8

    诸葛草帽 (Saturday, 25 September 2010 09:30)

    回复网型网秀:我刚做出来的时候你就发现了,呆着没事就写出来了

  • #9

    好上网 (Thursday, 30 September 2010 21:32)

    诸葛兄:想请教一下,我的网站(在底部)添加了自定义搜索框代码,同你站一样添加了一个隐藏的栏google,也添加了显示代码,但测试一下却不能正常显示?是什么原因呢?

  • #10

    诸葛草帽 (Thursday, 30 September 2010 22:03)

    回复好上网:我看了下,据我了解,你用的自定义代码是用的搜索框和显示页分离的那种,你的显示页中的代码只有

    <script type="text/javascript">
    //<![CDATA[
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 820;
    var googleSearchDomain = "www.google.com.hk";
    var googleSearchPath = "/cse";
    //]]>
    </script><script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
    </script>

    貌似谷歌提供的代码不止这些吧,完整的应该类似是:

    <div id="cse-search-results">
    </div>
    <script type="text/javascript">
    //<![CDATA[
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 820;
    var googleSearchDomain = "www.google.com.hk";
    var googleSearchPath = "/cse";
    //]]>
    </script><script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
    </script>

    修改下代码再试试吧!祝你成功!

  • #11

    好上网 (Thursday, 30 September 2010 23:25)

    我对照了一下,和你提供的代码是一样的,搞不懂那里出问题了。。。

  • #12

    诸葛草帽 (Thursday, 30 September 2010 23:29)

    回复好上网:我又看了下错误提示,看来是你谷歌自定义搜索引擎的设置问题,“显示页面必须填写类似:http://zhugecaomao.jimdo.com/google/”,你再修改下试试吧

  • #13

    好上网 (Thursday, 30 September 2010 23:47)

    都测试了,还是不行~~~

  • #14

    诸葛草帽 (Friday, 01 October 2010 08:10)

    回复好上网:我又做了N多试验,最后确定了问题在你的谷歌自定义搜索引擎搜索框中的唯一识别码《partner-pub-0424641312471442:jse9jwbhjfb》上,貌似你的自定义搜索引擎和你的 Google AdSense 挂钩吧,如果你的 Google AdSense 出问题的话会影响Google custom search的权限的,你可以拿我的唯一识别码《006564264524165290384:qlpwedfazb0》替换原来的试一下,你可以新建个搜索引擎,不使用“赚钱”等那几项或者其他方法解决AdSense间接带来的问题

  • #15

    摄影bolg123 (Friday, 01 October 2010 16:18)

    我直接创建了一个新的自定义搜索,但都不行,我估计和网站的托管服务器有关,同样的代码,我在免费版上测试是成功的,专业版就不行了,唉,搞了一天,服了~~~~~~

  • #16

    好上网 (Friday, 01 October 2010 16:25)

    我直接创建了一个新的自定义搜索,但都不行,我估计和网站的托管服务器有关,同样的代码,我在免费版上测试是成功的,专业版就不行了,唉,搞了一天,服了~~~~~~

  • #17

    返利网站大全 (Friday, 03 February 2012 13:42)

    不成功啊

  • #18

    晨璨园林 (Tuesday, 16 October 2012)

    交换链接:http://ylgh.jimdo.com
    http://lcxd.jimdo.com
    http://wenhua66.jimdo.com/
    Jimdo建站交流②群2236273