Google search not working - 如何做搜尋框

剛才注意到 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyw5q71djk4NlPlP5iqMn_ObVS4dEMK1t6ucBz9XR7nzxzrmy7RhlG1IjJL8UNS4bwmRBO_6kyzxfV5sa6D0JjXbwwucIDWpJS4l5SSbRgpSf56dr0DpednRBkuBMdPYfVpIu_nBTvj3bQ/) 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