Add a Customized Search Engine for Your Website

Do you provide search functionality on your blog or website? Search is a vital function you should have in every blog or website where content matters. It helps visitors to search content for specific topic or criteria without going through all pages. It saves time of visitors and they will be thankful for that feature. In some platforms, search is an in-build feature. But you may find it's not customizable. Or you may have no search for your site at all. In such a scenario, still you have to find another way to implement a search bar into your blog or website. Seems you have to learn coding. isn't it? But what if you can customize and add a search bar easily without being a code genic?

Yeah, you can. Now you need to worry about codings and all. You just need to customize your search engine and add it to your blog or website. Google has introduced Google Custom Search Engine for web sites to take advantage of customized search experience. This custom search engine can configure to search specific site or more sites as you prefer. It enable users to customize the look and feel of the search engine and its related functionality such as appearance of search results. In addition, you can track down search queries and view more statistics related to your search bar, add auto-completions, connect with Google Analytics and make money too. It's far too easy and you just need to configure relevant options. Wanna try it out now?

Before You Go:

You need to have a Google account to use Google Custom Search. If you have no Google account already, create a new Google account and proceed with below steps.

Steps:

1. Sign in to your Google account.

2. Go to Google Custom Search Website.

3. Click on Create a Custom Search Engine Button and you will be driven through a wizard.

4. Fill out the form with relevant information and press Next button after agreeing with Terms of Service.

5. On the next page, you will be able to select a search bar style. Further you can customize appearance by clicking Customize button below the selected style and live preview will be available below.

6. After the customization click on Next button.

7. Now you can grab the code for your customized search box and add to your website.

Note: If you are a Blogger user, you need to add your search box code snippet via an HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger.

More Information

* If you would like to customize your search box, follow through below steps and grab the new code snippet to be used instead of the code snippet you already got.

Further Customization for Search Engine

i. Go to Google Custom Search page.

ii. Click on the link, manage your existing search engines.

iii. Now click on control panel link correspond to your search engine.

iv. Click on Look and feel link from left pane.

Note: You can customize other options on the left navigation pane too. Refer to them later.

v. Choose layout, customize style and click Save & Get Code button.

Note: When you select layout, do not select Results only option as it is only valid for sites which has a search engine already.

vi. Grab your search engine element code and add it to your blog or website.

Notes:

* You can further customize look and feel by digging in to CSS styles of your search engine. Click CSS Source file link below to access CSS styles.

* If you have selected Two page or Two column layout, in addition to search box, you have to define where to display your search results. Refer following guidelines to implement it.

Two Column Layout

Grab the search results code of your custom search engine in the second text box and place it in your website where you wanna display search results.

Note: If you are a Blogger user and you have to add search results code via an HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger.

Two Pages Layout

i. Here, before you grab the search results code, you need to create a new page on your website.

Note: If you are a Blogger user, read How to Create Pages in Blogger and publish new page without any content.

ii. Now open your new page in a new browser window or tab, and copy the URL of your page from the browser address bar.

iii. Come back to Custom Search page and paste your new page URL in the Specify the url in your site where you want the search results to appear field.

iv. Now grab the search results code snippet in the second text box and add it in your new page you have created.

Note: If you are a Blogger user, you might be confused in adding HTML code to your new page. If so, read How to Embed External Content on Your Blogger Posts or Pages.

Enjoy :-)