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

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.

The Code

#namanyay-search-btn {
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border:0 none;
#namanyay-search-box {
background: #eee;
 border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;

<form id="searchthis" action="/search" style="display:inline;" method="get">
<!-- Search box for blogger by Namanyay Goel //-->
<input id="namanyay-search-box" name="q" size="40" type="text" placeholder="  Type! :D"/>
<input id="namanyay-search-btn" value="Search" type="submit"/>

How To use it

You have two ways of using this code.
You can either paste this code where you want in edit html. 
Or, you can paste this code in a HTML/TEXT widget. 
I have used the second way, and that is recommended. To do that – 
  1. Click on ‘Layout’ tab. 
  2. Add a gadget in the sidebar or any other place.
  3. Paste all the code. 
  4. Save, you are done.
Tip: It is recommended that you save it without a title, it will look better that way.


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 😀

Discuss on Twitter