'[How-To] Make a search box with Pure CSS for blogger!'

01 Jan 2012

If you are blogging, your blog is not complete without a search box. A search bar allows visitors to easily search content on your blog, and is certainly necessary. In this tutorial, I will teach you how to make a custom search bar for your site with pure CSS.

Tip: It is recommended that you save it without a title, it will look better that way.

Customize!

It is quite easy to customize the code. I will be listing different ways you can, and how to.

Customize colors

To change the colors of the search button, press Ctrl+f and type "background:#0099ff;" and replace the hex code (#0099ff) with a color of your choice.

To change the colors of the search box, press Ctrl+f to search, and type "background: #eee;" and replace the hex code (#eee) with a color of your choice.

Change font

To change the button font, press ctrl+f to search, and type "font" and then replace the fonts after it (trebuchet ms, trebuchet). If you replace with a font like times new roman, remember to enclose times new roman in single quotes (').

Change search box default text

To change the default text, search for "placeholder=" Type! :D"/>" and replace the text after placeholder= with your choice. It is recommended that you leave some spaces before the word, like I have done.

Change search box width

Just search for "width:160px;" and edit the number after width: , with the width of your choice. Remember, it is in pixels.

If you need anymore help, don't hesitate to drop a comment. I will surely help you.

Also, if you liked it, please include a link to my blog in your blogroll. I will surely link back :D