Blogger - Add search box

If you have already hide your top navigation bar, automatically your blogger search box will be disappeared. Well, no worry. I'll show you a simple tips on how to display a blogger search box on your sidebar.

First, go to your Template, Add a Page Element, copy this code and paste it into your HTML/Javascript widget:-

<form id="searchthis" action="http://BLOGNAME.blogspot.com/search" style="display: inline;" method="get">
<input id="b-query" maxlength="255" class="textarea" name="q" size="20" type="text">
<input id="b-searchbtn" value="Search" class="button" type="submit">

Change the BLOGNAME into your own blog name.

Then, go to Edit HTML page and place this code into your CSS :-

form input {
border: 1px solid #CCCCCC;
color:#FFFFFF;
}

form .textarea {
border: 1px solid #CCCCCC;
background-color: #000000;
font-size:100%;
}

form .button {
color:#FF9900;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size:100%;
font-weight:bold;
background-color:#000000;
}

Our final result should be:-

Note: You can change the size="20" for the textarea and your search button's name value="Search". Besides, you also can change the color in the CSS code above. See how it works on my dX-Demo blog.

Related : Add Blogger search box

Credits: Tips for New Blogger