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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHjEEjR5poiLEKOz0jq6MgfmqoJ7C5mFCig5apmrtmtnzs2n5XzL5mZT-r8w3GYVfrDr51J2nDxs_upOJulC_tzRGIh7KzA0eWlnEMzLvS269QJU_Fewa1JHLPRfxNaCtGRQkew/) 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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

3 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!

    ResponderBorrar
  2. Gracias! No encontraba algo relacionado por ningún lado, hasta ahora. Anteriormente implementaba el widget, pero pronto lo eliminaba porque no me gustaba su extrema simpleza, ahora lo implemento para dejarlo, con tu mejora. 🦾 

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[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.