A simple blog search engine
The code for this search engine is:
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.
Now, I’ll explain styling used in this search engine.
Width
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
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
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
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 of Search Box
background-color: #000000; is for background color of the search box (not of button). Lets change it tobackground-color: #FF0000; which is for red color and see what happens.
Border Color
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 of Search Button
background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens…
Search Button Text Color
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.
Enjoy Guys! and don’t forget to post your comments. © MyTricksTime.com
