Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Every website and blog must have a search bar to make it easy for visitors to search something. Even our site has a small, but stylish search bar in top. It's a must have stuff for all bloggers and webmasters. You can try it, and you'll find out that our search bar is linked with Google's custom search engine.
Replacing your boring search engine with a custom Google search engine is an awesome idea. You can also turn your old search to Google CSE, but we'll discuss that stuff later. Plus, you can also earn money with your Google CSE, but we'll also discuss it later.
It's time for you to learn how to create your own custom Google search engine, which is 100% embeddable and customization. As I noted before, you can check a live demo in our blog's right top bar, or by clicking here.
Creating A Google CSE:
Creating your own Google custom search engine is quite easy, you just need to type some basic information about your search preference and that's it. Here we go:
- Visit Google Custom Search
- Click on Add button and a form will appear
Now it's time to fill a simple form, with one on text field, and other options. As you can see in below picture, steps are just too easy.
- In first field, enter your blog/site's URL, you can enter more than one URLs (one URL per field)
- In second option, choose your preferred language (English if you're using Adsense)
- In third field, you can edit your search engine's name, which is optional and is only visible to you
- Finally, click on that Create button to finish your setup
Yea!! We're almost done with this section of this post. After clicking on Create button, following page will appear:
- Just click on Get code to get your CSE's code. Also that Google Bot looks freakin' awesome!!
Adding Google CSE To Blogger:
Now you can add that Google CSE code to wherever you wanna display your search engine. You can also try it on a html document. But we'll add it to our blog. Here you go:
- Go To Blogger> Layout > Add A Gadget > HTML/JavaScript
- Paste your Google CSE form and save your widget.
Customizing:
Now you can also customize this widget. There are two ways to customize it, first one is by Google CSE's option, and second way is with some CSS and HTML. In this post, we'll only discuss about first method.
Visit Google CSE > Select your custom search engine > Click on Look and feel option in right sidebar
Now in look and feel tab, you'll see lots of option to customize your search engine, like Layout, themes, customize, and thumbnails, as you see in below images.
You can try to customize your search with every option, without using any CSS. It's pretty simple. Also, don't forget to experiment with layout option, as it's a very great way to customize your search's layout. More tutorials and article about Google CSE are coming soon :)
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
