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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASOiYpKeRF7HQ0EK8CgCjEOi9nBY8JgdEB_YneDYOiajO60oLM7eVjRdoj5gnpqczjZ7Ky5nFeC_uoBGPisC5y3rlfCtjyhKQp9_Ey-C0sATm1p9aAkdnSHJVVEH2YkgWl0uwlgZAr1hm/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMy1xSRRZsgluIcGMS6S8wgb0-8yEsTrHpP0u784H5SGLJjbAM4H1QKe-J92UFCQzkG4BtJlCIiPfhboPNs9stP4vnrUPlUWE-ofU00WV8lJC3I4qCBA6J7gz3KtjI9oqIVCMFRq4kaLk/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOLUo5u8NIk6cOpPLZe73AToWFz-Ct3kX1dqAG9XVWfK4lQPkl0UKW_4fZhVDXb6ghRsVEXsT90Ncd0OyFURxoI6wdZIbP8pleS2lM-agh_RtVcMKegqFaZiEoO-1tAsffV96pgKbuyds/) 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

Subject : Google search not working - 如何做搜尋框
Author : Unknown - Dream Talker Updated at: 6:01 AM
Votes : 100% - 5.0 - based on 2015
如何自製站內搜尋框.依據背景色的不同,搜尋框的顏色需要變更.也可以設計成半透明的搜尋框.

Unknown

5 Stars - Reviews