Los blogs en Blogger cuentan por defecto con un buscador interno ubicado en navbar o barra de navegación, sin embargo, no es posible personalizarlo y adaptarlo a las necesidades de nuestro diseño. Por otro lado, con html y xml es posible replicar este buscador interno y adaptarlo completamente a nuestro gusto con estilos CSS.

Estructura HTML/XML

Como todo buscador, es necesario trabajarlo como un formulario con dos entradas en él, en otras palabras, una etiqueta form y dos input con lo valores de blog para procesar la búsqueda. El código es como el siguiente:

<div id='buscador'>
<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>

El primer input es el campo de texto donde el usuario escribirá su consulta, el segundo input es el botón para enviar la consulta escrita en el primero. Este segundo input además viene definido como tipo imagen (que bien puede ser un icono), por lo que solo hay que poner la ruta a nuestra imagen en el atributo src (src=”ruta”), dicha ruta puede obtenerse subiendo la imagen al mismo blog. Es lo único que necesita modificarse en el código anterior.

Este código se puede agregar justo después del código (En Diseño/Edición de HTML):

<div id='sidebar-wrapper'>

para que aparezca en la parte alta de la barra lateral, aunque igual funciona en cualquier otra ubicación.

Estilos CSS

A partir de las clases e identificadores se puede dar estilo al formulario: aplicarle un fondo, bordes, formato al texto, espaciamiento, etc. con CSS. Creando un ejemplo sencillo:

/* Buscador. 
Contenedor principal: form */

#buscador form {
	border:1px solid #999999;
	background:#E5E5E5;
	padding:10px;
	margin:0 10px 15px;
	position:relative;
}

/* Canpo de texto */

.searchtext {
	padding:2px 5px;
	color:#999;
	font-size:11px;
	line-height:15px;
	height:15px;
	width:87%;
	border:2px solid #BBDAFD;
}

/* Botón de submit */

.searchsubmit {
	position:absolute;
	right:10px;
	top:10px;
}

Y el resultado de estos estilos es algo como lo siguiente:

Buscador después de aplicarle estilos

Buscador después de aplicarle estilos

Este es solo un ejemplo, pero puede usarse modificando la ruta de la imagen en el input, colores de fondo y bordes, el ancho y los margenes, etc. El código CSS siempre se coloca antes de:

]]></b:skin>

Resulta sencillo y vistoso arreglar este importante elemento de nuestro blog.