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(http://lh3.ggpht.com/_NNS6r_z4aeg/St_LEuQJSCI/AAAAAAAANzI/XV4G0A5MqUo/lupa.jpg);
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 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.

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

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

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

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

    ResponderEliminar
  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

    ResponderEliminar

Reseña Leyenda de Korra: "Veneno de Loto rojo"

La leyenda de KorraZaheer revela las razones de su plan, liberar al mundo del Avatar, para llevarnos a un espectacular cierre de temporada.

[Leer artículo...]

Transformers 4: La era de la extinción (2014): Review y crítica

Transformers 4: La era de la extinción (2014) reseña y criticaMichael Bay nos aburre con una nueva entrega de la saga de transformers, tres horas insufribles de todo lo que ya vimos en las anteriores.

[Leer artículo...]

Gladiador (2000): Reseña y crítica

Gladiator 2000 peliculaTrece años han pasado desde que Ridley Scott hizo una buena película, Gladiador es la historia sobre Maximus, general del ejército romano y su vida como gladiador.

[Leer artículo...]

Los juegos del hambre: En llamas (2013): Reseña y crítica

Surface RT y Windows 8La adaptación del segundo libro de los juegos del hambre, no es Crepúsculo, pero no esperes un El Imperio Contraataca.

[Leer artículo...]

  © Cgnauta | CGsign blog | Licencia de uso | Matius algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

eXTReMe Tracker

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