How to Add Simple Google/Bing Search Box to Your Site

From this tutorial you’ll learn how to add simple search box to your site. It can be Google Search box  or Bing Search box.

zemez wordpress themes

Adding Google Search Box

When you don’t want a Search box to occupy too much space on your website, then you can add a small Google Search box on your page.

  • To do it, please, log in to your WordPress Dashboard. Locate Appearance tab on the left, and open Customizer submenu.google search box
  • In Customizer block locate Widgets tab and click on it. Here you need to choose the widget area where you want to place a search box and click on Add Widget button.google search boxgoogle search box
  • Select Text widget and paste the following lines of code to its content area.google search box
  <form method="get" action="http://www.google.cn/search">
  <div style="padding:4px;width:15em;">
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text" name="q" size="25" style="color:#808080;"
  maxlength="255" value="Google site search"
  onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
  <input type="submit" value="Go!" />
  <input type="hidden" name="sitesearch" value="yoursite.com" /></td></tr>
  </table>
  </div>
  </form>

view rawbasic-google-search.html hosted with ❤ by GitHub

Notice, that you have to change yoursite.com in the code to your actual website address.

  • Click on Save and Publish button to save the changes.add simple search box
  • Now you have a Google Search box on your website. It allows the visitors to search through your website’s content.google search box
  • If you need to enable global search (search through the web) you can add to the existing Search box two radio buttons. One will enable visitors to search the web, and the other will enable visitors to search through the website’s content.
    To add this kind of Search box you’ll need to paste the following lines of code to the Text widget content area.
  <form method="get" action="http://www.google.cn/search">
  <div style="border:1px solid black;padding:4px;width:20em;">
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text" name="q" size="25"
  maxlength="255" value="" />
  <input type="submit" value="Google Search" /></td></tr>
  <tr><td align="center" style="font-size:75%">
  <input type="radio" name="sitesearch" value="" />The Web
  <input type="radio" name="sitesearch"
  value="yoursite.com" checked /> Only Your Site<br />
  </td></tr></table>
  </div>
  </form>

view rawgoogle-search-with-radio-buttons.html hosted with ❤ by GitHub

Don’t forget to change yoursite.com to your current domain name to make the Search box work properly.

google search box

Adding Bing Search Box
  • If you need to use Bing search engine in the search box, add the following lines of code to the Text widget. As a result, a Bing Search box will appear on your website’s page.
  <form method="get" action="http://www.bing.com/search">
  <div style="border:1px solid black;padding:4px;width:20em;">
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text" name="q" size="25"
  maxlength="255" value="" />
  <input type="submit" value="Bing Search" /></td></tr>
  <tr><td align="center" style="font-size:75%">
  <input type="radio" name="q1" value="" />The Web
  <input type="radio" name="q1"
  value="site:yoursite.com" /> Only Your Site<br />
  </td></tr></table>
  </div>
  </form>

view rawbing-search-box.html hosted with ❤ by GitHub

google search box

 

公司简介

 

自1996年以来,公司一直专注于域名注册、虚拟主机、服务器托管、网站建设、电子商务等互联网服务,不断践行"提供企业级解决方案,奉献个性化服务支持"的理念。作为戴尔"授权解决方案提供商",同时提供与公司服务相关联的硬件产品解决方案。
备案号: 豫ICP备05004936号-1

联系方式

地址:河南省郑州市经五路2号

电话:0371-63520088

QQ:76257322

网站:800188.com

电邮:该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。