miércoles, 21 de octubre de 2009

Personalizar el "buscador de Google" en Blogger

Actualización: Versión mejorada de este tutorial en:
Buscador de Blogger, personalizado parte 1: Arreglando el cuadro de búsqueda.

Estuve revolviendo el CSS de todo mi template, aprendiendo un poco de las funciones  nuevas de Blogger y modificando aspectos como el buscador de Google que se puede agregar a nuestra plantilla como un gadget de nombre Cuadro de búsqueda.

El siguiente código CSS va comentado con /* */ y totalmente funcional, por lo que debe conservarse.

Eliminando la imagen y el texto "con la tecnología de Google"
Primero que nada el formato del buscador está incrustado en tablas, lo que hace difícil modificarlo, por tanto la solución obvia es ocultar la imagen y cualquier texto en esas casillas mediante display:none. así pues la primera regla CSS sería:
.gsc-branding-text, .gsc-branding-img-noclear
{
display:none;
}
una vez aplicado el botón debe verse como:

El botón de buscar
Ahora si agregaremos (Vea los comentarios de cada parámetro, los comentarios pueden removerse, la especificación !important debe mantenerse):
input.gsc-search-button
{
margin:0 0 0 5px !important; /* el ultimo valor establece la separación del boton y el cuadro */
color: #fff;  /* color del texto */
background: #FF55AA; /* color de fondo del botón*/
border: 1px solid #fff !important; /* grueso, tipo de contorno y color de borde */
}

Con esta configuración el cuadro debe verse:
El cuadro de búsqueda
Este dará problemas porque ya hay una configuración establecida por Google y deberemos agregar !important al final de algunas reglas para obligar a que se respeten nuestros deseos
 input.gsc-input
{
float:right; /*alinea a la derecha el cuadro */

width:200px !important;  /*establece el tamaño del cuadro */
color: #FFF; /* Color del texto */
background: #2f7eb9; /* color de fondo del cuadro */
border: 2px solid #000 !important; /* grueso, tipo de contorno y color de borde */
}

El resultado debe verse:
Agreguemos una lupa
Si queremos agregar una lupa tendremos que agregar una regla con el mismo nombre del cuadro de búsqueda, sólo que con nuevos parámetros (Note que ya no podemos usar background a secas, mi sugerencia es que fusione esta sección con la anterior si desea hacerlo):
input.gsc-input {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHjEEjR5poiLEKOz0jq6MgfmqoJ7C5mFCig5apmrtmtnzs2n5XzL5mZT-r8w3GYVfrDr51J2nDxs_upOJulC_tzRGIh7KzA0eWlnEMzLvS269QJU_Fewa1JHLPRfxNaCtGRQkew/);
background-repeat: no-repeat;
background-position: left top;
padding: 0 5px 0 30px !important; /* el ultimo valor es  la separación del texto y la lupa */
}
El resultado sería:
Dudas en comentarios, no correo.

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.

8 comentarios:

  1. Muy bueno, pero o me sale el: display:none en mi plantilla (es una plantilla de las nuevas). O, donde, es que parte del CSS se ponen los codigos, lo revise completo 3 veces xc

    ResponderBorrar
  2. Entra a tu cuenta y en escritorio de blogger pulsa el vinculo Diseño de tu sitio, luego en Edición HTML

    Veras que se muestra el código de la página jala la barra de desplazamiento hasta ver una linea que dice
    /* Content
    ----------------------------------------------- */


    Pega el código CSS después de esta.

    Pulsa en Guardar plantilla.

    Una vez que guardado, al lado izquierdo de Edicion HTML pulsa en "Elementos de la página" y en la columna que prefieras, pulsa en "Añadir un gadget", en la ventana que se abre busca Cuadro de búsqueda y pulsa en el + para agregarlo, desmarca "Acceso desde aquí" e
    "Internet" y pulsa en guardar.

    Ahora el buscador debe aparecer sin ningún texto.

    ResponderBorrar
  3. Agrega el gadget Cuadro de búsqueda y luego agrega los estilos que he propuesto y verás a lo que me refiero.

    ResponderBorrar
  4. Hola, gracias por tu post, dime se puede cambiar el fondo de donde salen las listas de lo que buscaste mediante el buscador?

    Desde ya gracias!

    ResponderBorrar
  5. y comohiciste para redondear las esquinas, otra cosa si quieres que tenga un fondo oscuro como en el buscador de arriba lo pones en el css del buscador o del gadget

    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.