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

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru 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