New Search Box for Blogger

Having removed the standard Blogger navigation bar which included the search function from the top, I need to add my own search box. Since I want the search to be easily available, I am going to add it on top of the Categories on the upper right hand side.

I will wrap it all in a "navdiv" div which will allow me to both add vertical margins and a hook into the input tags. The markup that includes a form with two input tags:



q is important to Blogger since it shows up where the form is being handled by Blogger software. "/search" - the url that the search has to go. This is a relative url and it's important not to change to something else.

Since I don't want to effect all the "input" tags, I use a selector by hooking into the new "navdiv" div in my style sheet. I also add bottom margin to the div.

.navdiv { margin-bottom: 25px; }

/*any input class that comes under a navdiv parent class*/
.navdiv input {
color: #999999;
font-size: 12px;
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
}

#sbutton { margin-top: 5px; }
#sbox { margin-top: 2px; }

The navdiv input style matches with the rest of the fonts used for the right side navigation bar.