domingo, 29 de mayo de 2011

Buscador de Blogger, personalizado: Arreglando el cuadro de búsqueda

Sin lugar a dudas el buscador de Google interno de Blogger es una genial implementación y a la vez poderosa herramienta para encontrar contenido en tu web y funciona mucho mejor si implementaste el envío de tu feed como un mapa de sitio.

Siendo sincero, esta es la primera vez que diseño una plantilla enteramente desde cero en Blogger, que pueden ver en esta dirección, donde he implementado todos los trucos de SEO que he aprendido con los años y muchos elementos que antes no les daba mucha importancia hoy los he replanteado, como el buscador interno en Blogger ofrecido por Google.

Primero que nada debe tener el Cuadro de búsqueda, para ello vaya a Diseño - Elementos de la página:
Y pulsa en uno de las barras laterales con un mínimo de 250px en Añadir un gadget:
Buscan el gadget Cuadro de búsqueda y pulsan en el "+":
El resultado debe verse así, que es bastante feo:
Lo queremos así:
Para ello, en Diseño - Edición de HTML en la sección de CSS pegamos:

/* interceptar diseño de google estilo 1.1 por matius */
input.gsc-search-button:hover {background:#A80000;}
td.gsc-search-button {padding:0 0 0 10px !important;}
table.gsc-search-box
{width:224px !important; /* ancho de la tabla */ margin:0 auto 0 auto;}
input.gsc-search-button
{margin:0 !important;
padding:5px;
color: #fff; /* color de la letra */
background: #000; /* color de fondo del boton */
border: 2px solid #fff !important; /* borde del botón */
}
input.gsc-input {
background:#fff url(http://lh3.ggpht.com/_NNS6r_z4aeg/St_LEuQJSCI/AAAAAAAANzI/XV4G0A5MqUo/lupa.jpg) 3px 3px no-repeat; /* la imagen de la lupa */
padding: 5px 5px 5px 35px !important;  /* Ultimo valor es la separación con el texto  */
width:150px !important; /* ancho de la entrada de texto */
color: #000;
border: 2px solid #000 !important;
}
.gsc-branding-text, .gsc-branding-img-noclear
{
display:none;
}
/* Fin de estilo para Google por matius */

Eso es todo.

Personalizando colores y anchos
El resultado será como abajo que incluye el efecto hover sobre el botón -mostrado en rojo- y centrado automático:
Si lo ponemos sobre un fondo negro vemos el borde del botón:
Si queremos cambiar el color del botón modificamos el fondo o background de la regla: input.gsc-search-button:
Si queremos cambiar el color del botón cuando pongamos el cursor encima, modificamos la regla: input.gsc-search-button:hover:
El buscador de Google genera un tabla, en este caso el valor es de 224px, la tabla se alinia automáticamente al centro, si quiere reducir su valor, modifique la regla table.gsc-search-box, pero también deberá quitar tamaño a la regla input.gsc-input cuyo tamaño es de 150px. Para que no se haga bola, si quiere la tabla de 200px, reste los 24 del corte a input.gsc-input para que ambas estén en proporción.

Si quiere cambiar el color de fondo de la caja de entrada de texto, cambie la regla input.gsc-input pero no olvide que el valor background corresponde al fondo de color de la caja y color al color del texto.

Si usa Google Chrome y no sabe como generar hexadecimales, vea la review de Chroma, que le permite generar colores hexadecimales rápidamente.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

1 comentarios:

  1. Hola. Me gustó mucho el tutorial, gracias! Pero me gustaría escribir en el interior de la caja de búsqueda, junto a la lupa ("buscar en este blog..." etc). Cómo puedo hacerlo? Gracias!

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com