Google search not working - 如何做搜尋框

6   Comments

剛才注意到 Google 站內搜尋模組失效.

只好緊急自製一個搜尋框; 雖然很少人會使用到搜尋功能.
站內搜尋框的作法分享給大家.  (很簡單的 !)

請先設計一張底圖當作搜尋背景, 像是這一個.

如何自製站內搜尋框

依據背景色的不同, 搜尋框的顏色需要變更.
也可以設計成半透明的搜尋框.  其他部分只剩程式碼而已.

將以下程式碼貼入 Html/Java 模組.


<style type="text/css">
#
dream-searchbox{background:url(A) no-repeat scroll center center transparent;width:230px;height:50px;disaply:block;}
form#
dream-searchform{display: block;padding: 7px 10px;margin:0;}
form#
dream-searchform #s{padding: 7px;margin:0;width: 160px;font-size:18px;color:#ffffff;vertical-align: top;border:none;background:transparent;}
form#
dream-searchform #sbutton{margin:0;padding:;height:30px;width:30px;vertical-align:top;border:none;background:transparent;}
</style>

<div id="
dream-searchbox">
<form id="
dream-searchform" method="get" action="/search"><input onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" id="s" onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." name="q" /> <input id="sbutton" src="http://sites.google.com/site/agogodream/blank" type="image" /> </form></div>


A = 搜尋框圖檔網址
♦ 紅色的數值, 依據圖檔尺寸更改.
#ffffff 是搜尋字的顏色. 刪除這個數值, 將顯示電腦預設的顏色.
♦ 藍色的字, 對應的屬性名稱要相同.
..............................................................................................................................
順便做了幾個, 如果喜歡就帶走吧.  (唉..好宅的週日)
♦ 藍紫水晶介面



<style type="text/css">
#dream-searchbox{background:url(http://lh3.googleusercontent.com/-ObDq6YtEgQI/TevzLt51aOI/AAAAAAAAAxQ/Tu8tgF7yqIg/pucrystal.png) no-repeat scroll center center transparent;width:230px;height:50px;disaply:block;}
form#dream-searchform{display: block;padding: 7px 10px;margin:0;}
form#dream-searchform #s{padding: 7px;margin:0;width: 160px;font-size:18px;color:#60417d;vertical-align: top;border:none;background:transparent;}
form#dream-searchform #sbutton{margin:0;padding:;height:30px;width:30px;vertical-align:top;border:none;background:transparent;}
</style>

<div id="dream-searchbox">
<form id="dream-searchform" method="get" action="/search"><input onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" id="s" onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." name="q"> <input id="sbutton" src="http://sites.google.com/site/agogodream/blank" type="image"> </form></div>


♦ 肥貓搜尋


<style type="text/css">
#dream-searchbox{background:url(http://lh6.googleusercontent.com/-IgDu_wB7neQ/TevzMJS-eiI/AAAAAAAAAxU/oMmetQgSL00/catsearch.png) no-repeat scroll center center transparent;width:230px;height:50px;disaply:block;}
form#dream-searchform{display: block;padding: 7px 10px;margin:0;}
form#dream-searchform #s{padding: 7px;margin:0;width: 160px;font-size:18px;color:#895117;vertical-align: top;border:none;background:transparent;}
form#dream-searchform #sbutton{margin:0;padding:;height:40px;width:30px;vertical-align:top;border:none;background:transparent;}
</style>

<div id="dream-searchbox">
<form id="dream-searchform" method="get" action="/search"><input onblur="if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}" id="s" onfocus="if (this.value == &quot;&quot;) {this.value = &quot;&quot;}" name="q"> <input id="sbutton" src="http://sites.google.com/site/agogodream/blank" type="image"> </form></div>


♦ 藍光搜尋


<style type="text/css">
#dream-searchbox{background:url(http://lh5.googleusercontent.com/-RlsCPjLRe5M/TevzMULUgpI/AAAAAAAAAxc/nArKMrM9VJ8/cloudsearch.png) no-repeat scroll center center transparent;width:230px;height:106px;disaply:block;}
form#dream-searchform{display: block;padding:40px 5px 30px 20px;margin:0;}
form#dream-searchform #s{padding:;margin:0;width: 150px;font-size:18px;color:#ffffff;vertical-align: top;border:none;background:transparent;}
form#dream-searchform #sbutton{margin:0;padding:;height:40px;width:40px;vertical-align:top;border:none;background:transparent;}
</style>

<div id="dream-searchbox">
<form id="dream-searchform" method="get" action="/search"><input onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" id="s" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" value="Search..." name="q" /> <input id="sbutton" src="http://sites.google.com/site/agogodream/blank" type="image" /> </form></div>


♦ 1010 Search


<style type="text/css">
#dream-searchbox{background:url(https://lh6.googleusercontent.com/--NGuu6wlFzM/TevzMDoKliI/AAAAAAAAAxY/CIK8_3wJ-r8/10101.png) no-repeat scroll center center transparent;width:230px;height:87px;disaply:block;}
form#dream-searchform{display: block;padding:0;margin: 30px 5px 5px;}
form#dream-searchform #s{padding:0;margin: 30px 5px 5px;width: 150px;font-family:arial black;font-size:18px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#dream-searchform #sbutton{margin:0;padding:;height:50px;width:50px;vertical-align:top;border:none;background:transparent;}
</style>

<div id="dream-searchbox">
<form id="dream-searchform" method="get" action="/search"><input onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" id="s" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" value="Search..." name="q" /> <input id="sbutton" src="http://sites.google.com/site/agogodream/blank" type="image" /> </form></div>


水晶介面另一篇 ► Click here


Author Summary
Google search not working - 如何做搜尋框
Subject : Google search not working - 如何做搜尋框
Author : - Dream Talker Updated at: 6:01 AM
Votes : 100% - 5.0 - based on 2015
如何自製站內搜尋框.依據背景色的不同,搜尋框的顏色需要變更.也可以設計成半透明的搜尋框.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 我帶走囉~謝啦!

    ReplyDelete
  2. To Angela
    不用客氣, 這幾版有透明設計,適合妳的黑底背景.

    ReplyDelete
  3. Anonymous3:11 PM

    Where to celebrate Christmas advise?

    ReplyDelete
  4. To @Anonymous :
    Stay with who you love wherever, maybe your family.
    or hang out with good friends and have a beer.

    I will buy McDonald's or pizza share with my cat at home. haha~

    ReplyDelete
  5. great! 收錄起來~

    ReplyDelete
    Replies
    1. 當時隨意塗鴉, 我應該重做圖形才對.

      Delete