Añadir un Buscador Personalizado

Al comenzar a redactar esta entrada tenía mis dudas. No sabía muy bien si encajaba mejor en Consejos para Optimizar tu Blog o Programación Básica para Bloggers. Finalmente, después de pensar un poco en ello, me decidí por la primera opción.

Sí, lleva algo de programación, pero básicamente un buscador lo que hace es ayudar a nuestras visitas a encontrar lo que buscan, mejorando así la navegación y usabilidad de nuestra bitácora, por lo que creo que, desde mi punto de vista, está mejor en la primera categoría.

Hoy vamos a ver como instalar un buscador personalizado en la sidebar de nuestro Blog. Como el mío, justo a la derecha.

Es muy sencillo, el código que tenemos que añadir como elemento HTML/Javascrip en Diseño es el siguiente:

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>  <input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

Una vez añadido, para poder ir comprobando los cambios que hagamos en nuestra plantilla, vamos a ver el estilo que aplicaremos:

El código que vamos a usar es éste:

#search { width: 228px; /* Ancho del buscador */ height: 25px; float: right; text-align: center; margin-top: 6px; margin-right: 6px; /* Imagen de fondo del buscador */ background: #8FE1D8 url(#) no-repeat;  /* Color de fondo del buscador */ border-radius: 10px 10px 10px 10px; /* Borde del marco del buscador */ } #search-box { width: 180px;  /* Ancho del cuadro blanco de búsqueda */ margin-top: 3px; border:0px; background: #FFFFFF;  /* Color de fondo del cuadro de búsqueda */ text-align:center; border-radius: 10px 10px 10px 10px; /* Borde del cuadro del buscador */ }

Si copias el código tal cual en tu plantilla HTML (ahora te digo donde) el resultado sería éste:

Pero si modificas los campos que  he marcado en rojo por tus propios colores y efectos de redondeado, puedes dejarlo completamente integrado con la combinación de colores de tu Blog.

Ya  lo he comentado otras veces, pero la página que más me gusta para elegir códigos HTML es ESTA.

Es un código CSS así que para colocarlo en nuestra plantilla HTML, lo haremos antes de:

]]></b:skin>


Si has instalado el menú personalizado que vimos en ésta entrada, puedess poner este nuevo código justamente debajo, dejando un par de espacios.

*Si no lo has instalado, te aconsejo que visites esa entrada para ver exactamente donde debería ir este nuevo código.

Y ahora sí, en Vista Previa, después de haber añadido los dos códigos (el primero en Diseño y el segundo en nuestra plantilla HTML), puedes empezar a jugar con los colores y redondeos.

¡Espero que te sea útil! A mí me encanta como queda.

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥