Wednesday, January 22, 2014

Add Google Custom Search to Your Site! (Exclusive)

google custom search engine
Actually there is nothing to discuss about the search box widget. Generally most of the blog or website have a search option. Search Box makes it easier to find something inside a site. Have a look at the search box of www.iTTimesbd.com at the top. This site has more than 450 posts. So, to find a specific post it not possible to explore all the posts one by one. In this case the easier and quicker option is Search Box. So, you can easily imagine the importance of Search Box for a site. And in today's post I gonna discuss about Google Custom Search.


There are several way you can add Search Box widget your site. But Google Custom Search is something special. Google Custom Search lets you include a search engine on your website to help your visitors find the information they're looking for. Because Custom Search is based on Google's core search technology, you can be confident that your users are getting high quality, relevant results. And the most interesting thing is, you can integrate the Google Custom Search box with your Adsense account.

All you need just to create a Google Custom Search box for your site and add it to your site. Before proceed further have a look at the custom search engine of this site - iTTimesbd. Now complete the following step by step procedure to add Google Custom Search Box to your site.

Note: You will have to log in with your Gmail account.

Creating Google Custom Search Box:
  • Then click on New Search Engine to create a new engine.
  • Then Select the language of your search engine.
  • Then in the name box enter a name to identify your search engine. (ie. iTTimesbd)
  • Now click on Create button. Done!

Once you've created your custom search engine, Now you can add the Custom Search Box to your site. To do this, you'll need to copy some code and paste it into your site's HTML where you want your search engine to appear.


Adding Custom Search Box to Your site:
  • Then click on  Setup, and click the Basics tab.
  • Now in the Detaljer section, click Get code.
  • Then Copy and Paste the code inside your Site's HTML page in where you want the Search Box to appear.

Example: You have to Paste the code into a <div> element in your site's <body> section, where you want both of the search box and the search results to render. See the below HTML example to place the search box properly.


<html>
<head>
<title>my site</title>
...
<head>
<body>
<div1>...</div1>
PASTE THE CODE HERE
<div2>...</div2>
</body>
</html>


For Blogger.com Users: Here adding this Search Box is as easy as adding HTML/JavaScript gadget. 
  • Sign into your BLogger account and go to Dashboard.
  • Then go to Layout >> Add a gadget link where you wanna place this Search Box.
  • Then from the gadget list select HTML/JavaScript.
  • Now Paste the Search Box Code inside the content box.
  • Finally click on Save button.

Customization: Actually I have already discussed the necessary points, but still I want to write something in brief which will help you to customize this search box: First go go to the Google Custom Search Home. Select your search engine from here.
Custom Search Engine
  •  Setup: Here Basic and Make Money these two option is important From the Basic tab you can can rename your search engine, give it a description, provide keywords, change language and add more sites to your search engine.
    From the Make Money tab you can can add your AdSense account to your Search Engine. As a result Adsense will show relevant ads in the search result and you will make money when users click on an ad they see in your search results.
  • Look and Feel: Here in this section you will get four (4) option to customize your search box so that it fits with your site design. Set the Layout and Theme which suit your site design most. From the Tilpass option you can change the Font and color of the Search Box and Button. In the Thumbnail you can Enable or disable thumbnail images in search results. 

That's it. I hope you have already added the Search Box to your site. Still if you have any confusion then don't hesitate to leave your valuable comment.


Stay with www.iTTimesbd.com for more IT related post

No comments:

Post a Comment