May 20, 2011

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.


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.


* 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.

NoteIf 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.

NoteIf 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 :-)

Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.

Related Posts and Categories

Category, , , , ,


* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.

Unknown said...

That is another amazing one Mayura!

Mayura De Silva said...

Thanks Lisa :) It's really great tool from Google and yet very easy to implement if you know how. However that's how I implemented search bar on this blog. Hope you will create one for you too ;)

Thanks for stopping by and commenting Lisa :)


eugeniusgenius said...

Hey I've managed to add the search button where i wanted it but I don't like the way results are displayed. How to create a separate page for results the way you did ?

Mayura De Silva said...

Hi Eugenius,

Here I've mentioned it under "Two Pages Layout". Results on a separate page :)


eugeniusgenius said...

 can you visit my blog and see how messed up it is ?

for one i don't want the name of the new page created to appear in tabs, and second, i don't it to be shared or like as share button are visible on my other pages

Mayura De Silva said...

Hi Eugeniu,

I couldn't find a separate page on your blog for search results mate. I did try a query with your search bar but it directs to Google Custom search results page. Hmmm.... Yeah, it's more faster than landing on a page on your blog. Did you resolved that or keeping it that way mate? :)

BTW you can edit "Pages" element to hide whatever page you wanna hide and share buttons appear 'cause they are possibly enabled for pages too. So you have to enable it only for post pages. Read How to Show/Hide Elements on Different Pages in Blogger.

Hope it helps :)


eugeniusgenius said...

 yeah, i just couldn't let viewer see how messed up it was, i found more suitable for me to have viewer land on a separate google results page. thanks anyway :)

Mayura De Silva said...

You're welcome mate :) Yeah, rather than increasing workload or messing up with pages, your decision could be suitable for this scenario as it has no negative effects on your blog or search.