Blog post updated : no update

Wednesday, July 18, 2007

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="" 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;

form .textarea {
border: 1px solid #CCCCCC;
background-color: #000000;

form .button {
font-family:'trebuchet ms',helvetica,sans-serif;

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


Alberto said...

Very instructive post - saved me a lot of trouble. Thanks a lot

Alberto said...

Ah! And you might like to visit this blog (if you don't know it already). I found the blog very interesting:
Enjoy it!

Powered by Blogger