Personalizando nuestro buscador con CSSy HTML..

En Blogger, agregar un buscador al blog es muy sencillo, es tan simple como usar el que nos muestran en Blogger Draft o simplemente crear uno a nuestro gusto y nuestros colores y forma preferida..

Para agregar un buscador sencillo al blog basta con agregar este pequeño código en el lugar donde queramos que aparezca, como podrán observar a continuación no tiene nada de fantástico..

<form action='http://nombreblog.blogspot.com/search' method='get'>
<input type='text' value='' name='q' />
<input type='submit' value='Buscar' />
</form>

El resultado seria este, lo único que hacemos es cambiar nombreblog por el nuestro en el codigo visto anteriormente..

¿Pero como lo personalizo utilizando CSS en el?

Es muy fácil, usaremos estas lineas de código para lograr lo que estábamos buscando..

#searchform #s { // Esta instrucción la usaremos para personalizar la caja de búsqueda
padding: 0px;
margin: 0px auto;
background-color : #FFFFFF; // El color de fondo es blanco, agrega el código hexadecimal para cambiar el color
height:14px; // Cambia la altura de la caja de búsqueda, cambia 14px por la medida exacta
width:150px; // Cambia el ancho de la caja de búsqueda, cambia 150px por la medida exacta
margin-left: 10px;
font:11px Arial, Times New Roman; // Tipo de letra y tamaño de letra
font-weight: normal;
padding: 5px 16px;
}

#searchsubmit:hover { // Esta instrucción la usaremos para personalizar el botón de enviar por defecto
background:#777777; // El color del enlace al ser pulsado
}

#searchsubmit {
margin-left: 0px;
padding: 0px;
background:#FFFFFF; // Color de fondo del botón de enviar
border:none;
width:80px; // Anchura del botón de enviar
height:21px; // Altura del botón de enviar
font:11px "Trebuchet MS", "Lucida Sans Unicode", Verdana;
color: #777777; // Tipo de letra, tamaño de letra y color de letra de la palabra Enviar
}

Cabe recordar que las partes en verde no pertenecen al código y que las borraremos cuando agregemos este mismo a nuestra plantilla..

Cuando terminemos de personalizar el buscador mediante CSS, agregamos esta otra linea de códigos en la parte de HTML, en la zona exacta donde queramos que aparezca el buscador..

<span>
<form action='/search' id='searchform' method='get'>
<table border='0'  width="350" bgcolor="#000000" cellpadding='10' cellspacing='0'>
<tbody>
<tr>    
<td><input id='s' maxlength='50' name='q' onblur='if (this.value == "") {this.value = "¿Buscas algo?";}' onfocus='if (this.value == "¿Buscas algo?") {this.value = "";}' size='18' type='text' value='¿Buscas algo?'/></td>    
<td><input id='searchsubmit' type='submit' value='Buscar'/></td>
</tr>
</tbody>
</table>
</form>
</span>   

Las partes que podemos modificar están marcadas de colores diferentes, para cambiar el tamaño y color de fondo de la parte donde estará el buscador, cambiamos las zonas marcadas con verde, para cambiar el mensaje de ¿Buscas algo? y Buscar simplemente modificamos ese texto por el deseado, las demás partes seria mejor dejarlas así si no queremos errores dentro del código..

Al final podría quedar algo parecido a esto si por supuesto usamos y modificamos estos pequeños códigos de una manera correcta y eficaz. Eso es todo, si te preguntas si esto funcionara en IE7 la respuesta es si, si funciona correctamente, pero ten cuidado el modificar el código ya que puedes llevarte una desagradable sorpresa :x..




Entradas relacionadas

Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Cursor personalizado en CSS..
Dar estilo a las listas con CSS
IE6, Un problema para los diseñadores y bloggers