How to create a Blogger search

The blogs hosted on Blogger have by default an internal search located in the navbar, however, it isn’t possible to customize it or change it in order to make it fit our layout. In the other hand, with HTML and XML we can recreate this internal search and customize it any way we want with CSS stylesheets.

HTML/XML structure

As every search box, it is necessary arrange it as a form with two inputs with the blog’s data to make the search successful. The code is as follows:

<div id='search'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
	<div>
		<input class='searchtext' id='q' name='q' type='text'/>
		<input class='searchsubmit' type='image' name='submit' src='http://sitio-de-hosting.com/search.gif'/>
	</div>
</form>
</div>

The first "input" is the text box in which the user will put his/her query, the second is the submit button, which allows (you guessed it) submit the query in the first "input" to process it. This second "input" comes defined by a image (it may be an icon as well) which is why you only have to put in the address to our image on the src attribute, you can get this address by uploading this image to a free hosting service like Imageshack or Photobucket. That’s the only thing you have to modify in the code above.

This code can be added just before the above code:

Dashboard → Layout → Edit HTML

<div id='sidebar-wrapper'>

to show it on the top of the sidebar, but it works on any other location.

CSS Stylesheets

Starting from the classes and ID’s we can apply styles to the form: a background, borders, text format, padding, etc… with CSS. This is an example:

/* Search.
main-wrapper: form */
 
#search form {
	border:1px solid #999999;
	background:#E5E5E5;
	padding:10px;
	margin:0 10px 15px;
	position:relative;
}
 
/* Text box */
 
.searchtext {
	padding:2px 5px;
	color:#999;
	font-size:11px;
	line-height:15px;
	height:15px;
	width:87%;
	border:2px solid #BBDAFD;
}
 
/* submit button */
 
.searchsubmit {
	position:absolute;
	right:10px;
	top:10px;
}

And the result is something like this:

This is just an example, but it is ready to use just by modifying the input’s image address, background colors and borders, width and marggins, etc… The CSS code is always located before:

]]></b:skin>

It’s simple and looks great fixing this important part of our blog.