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 izquierda.
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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' 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;
border-radius: 10px 10px 10px 10px; /* Borde del marco del buscador */
}
#search-box {
margin-top: 3px;
border:0px;
background: #FFFFFF;
text-align:center;
border-radius: 10px 10px 10px 10px; /* Borde del cuadro del buscador */
}
Si copiáis el código tal cual en vuestra plantilla HTML (ahora os digo donde) el resultado sería éste:
Pero si modificáis los campos que os he marcado en rojo por vuestros propios colores y efectos de redondeado, podéis dejarlo completamente integrado con la combinación de colores de vuestro Blog.
Ya os 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 habéis instalado el menú personalizado que vimos en ésta entrada, podéis 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), podéis empezar a jugar con los colores y redondeos.
¡Espero que os sea útil! A mí me encanta como queda.
¿Te ha resultado interesante esta entrada?
¡¡Compártela en tus redes sociales!!
Puede que a alguno de tus contactos también le resulte útil
Gracias ♥