How to Add a Stylish Blog Search Engine

You can add a colorful search engine to your blog with ease. Many people prefer to have a simple search engine but you can customize it to suit your taste or your blog outlook. Lets have a look at a simple search engine and then we can customize it.

A simple blog search engine

The code for this search engine is:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Enter something here..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Search!" type="submit"/></form>

You can change two things in this simple search engine. One is value="Search!" where you can replace Search! with some other word like Go!. You can also replace value="Enter something here..." with some other line which will appear in the search box.



Customize this simple search engine to make it stylish and cool



Now, we have seen a simple search engine lets customize it by changing its width, height, colors & font size.

I've used two colors (black & white) to customize the outlook of our simple search engine and it's looking cool, lets have a look at its code and then we'll further customize it.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Enter text to search..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Submit!" type="submit"/></form>

Now, I'll explain styling used in this search engine.


width: 150px; is defining width of this search engine, you can change it to a higher value for more width. Like if I change it width: 150px; to width: 200px; this is the result...

height: 15px; is defining height, you can change also change it to another number like when I changed height: 15px; to height: 20px; this happened...

color: #FFFFFF; is for white color. You can certainly have another color by entering it's hex code and if you don't know about hex codes then simple download ColorPic which is a free color capturing utility.

I changed the color: #FFFFFF; to color: #FFD900; which is kinda orange color and this is the result...

font-size: 14px; is for font size in px. I changed it to a lower value 10px just to show you the effect...

background-color: #000000; is for background color of the search box (not of button). Lets change it to background-color: #FF0000; which is for red color and see what happens.

Next things is the styling of our search button. border-color: #000000; is the border color of our search button, change it to border-color: #FF0000; and see the result...

background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens...

Last thing is color: #000000; which is the color of search button text, lets change it to #0000FF (blue) and the result is...

Installing this search engine in your blog



You can install this engine after all the customization in your sidebar by going to Layout | Page Elements and on your sidebar click Add a Gadget link. From the new opened window chose HTML/JavaSrcipt gadget and in the Title field write a title as you wish and in the Content area, add the code of your search engine. Click Save and enjoy.