Estiliza el nuevo formulario de Búsquedas Blogger

Como ya he dicho en algún comentario, voy a ir destripando los widget y trucos que he utilizado en ésta y en otras plantillas que he preparado (ver TodoTwitter, El Diario de Adán, Blogs con EÑE, por citar mis preferidos). Así que sin más dilación, vamos a empezar por:

El nuevo widget de Búsquedas de Blogger.

Hace relativamente poco que está disponible desde nuestro panel de Blogger habitual, desde principios de este mes. Anteriormente se podía instalar desde Blogger in Draft, por donde te recomiendo pasar de vez en cuando...

Primero lo instalamos como cualquier otro widget, eligiendo los parámetros que nos ofrece:

|


Una vez lo tengamos instalado, vamos a editar el código de nuestra plantilla para cambiar totalmente el aspecto del formulario.




Buscamos ]]></b:skin> y justo antes vamos a ir pegando el código CSS de nuestro buscador:
Por partes:

1.- Le ponemos color de fondo, bordes y separamos el contenido de los márgenes:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333;
padding: 2px;
border: 1px double #FFFF00;
}


Incluso, podemos Añadir una imagen de fondo:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}



2.- Diferenciamos la caja de búsqueda:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}



3.-Cambiamos la apariencia del botón Buscar:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button {
background: #F4C953; /* color de fondo*/
font-weight: bold; /* estado de la tipografía */
font-size: 18px; /* tamaño de la letra */
font-family: Comic Sans MS; /* fuente */
}



O simplemente, lo eliminamos:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button {
display:none;
}



4.- Ya que estamos, podemos eliminar el logo y la frase "con la tecnología de"



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button, .gsc-branding-img-noclear, .gsc-branding-text {
display:none;
}



5.- Cambiamos la tipografía de la caja de búsqueda:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button, .gsc-branding-img-noclear, .gsc-branding-text {
display:none;
}
#CustomSearch1 input{
font-family: Comic Sans MS;/* fuente*/
font-size: 16px;/* tamaño de la letra*/
}



Podemos cambiar el color de fondo de esa misma caja:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button, .gsc-branding-img-noclear, .gsc-branding-text {
display:none;
}
#CustomSearch1 input{
font-family: Comic Sans MS;/* fuente*/
font-size: 16px;/* tamaño de la letra*/
}
.gsc-input {
background: #FF9900;
}



O podemos eliminar el color de fondo:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button, .gsc-branding-img-noclear, .gsc-branding-text {
display:none;
}
#CustomSearch1 input{
font-family: Comic Sans MS;/* fuente*/
font-size: 16px;/* tamaño de la letra*/
}
.gsc-input {
background: transparent;
}



6.- Eliminamos el borde de la caja:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top left no-repeat;
padding: 50px 2px 2px 2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
background: #336699;
padding:5px;
}
.gsc-search-button, .gsc-branding-img-noclear, .gsc-branding-text {
display:none;
}
#CustomSearch1 input{
border: none;
font-family: Comic Sans MS;/* fuente*/
font-size: 16px;/* tamaño de la letra*/
}
.gsc-input {
background: transparent;
}



7.- Finalmente lo recolocamos todo un poco a nuestro gusto:



[+]Ver código



/* Buscador
----------------------------------------------- */
#CustomSearch1 form {
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcbUGgWT8DiB9KfNhqIU8V2SBn2qszdU1pAulxduXGFV7eI2Xs_h_wxJ6hVmqL1QP8rRFDhao2qH4vjUsheffl4sm4dQSGZsrKjyepRmz4orvSrhSF0SxZoXsScoUsPC7b1IU8l9K0p24/s1600/buscar.png) top right no-repeat;
padding:2px;
border: 1px double #FFFF00;
}
.gsc-search-box {
padding:5px;
}
.gsc-search-button, .gsc-branding-img-noclear, .gsc-branding-text {
display:none;
}

#CustomSearch1 input{
color: #ffffff;/* color de la letra */
border: none;
font-family: Comic Sans MS;/* fuente */
font-size: 16px;/* tamaño de la letra */
}
.gsc-input {
background: transparent;
}



Combinando cualquiera de estas opciones podremos darle un poco de vidilla a otro de los widgets tan sosos que nos proporciona "papi Blogger", eso ya lo dejo a la imaginación de cada uno....

Para ver el ejemplo funcionando en un blog de pruebas haz clic aquí.





Subir || Bajar

8 opiniones:

Anónimo :

ah! chido! tardas mucho para poner el truco de la barra de contacto? :P

Liz Hopps :

oh y pensar que yo hice esto cuando habia que manejarse solo con la platilla htlm...me alegro que todo sea más facil ahora y son preciosos los diseños....tal vez ponga alguno en mi blog de amigos...ahi no hay gracias =)

Iván_RG :

Sharysce tiempo al tiempo...;)

Elizabetha Souvre puede quedar más bonito, pero ten en cuenta que funcionará mejor en blogs que ya estén indexeados por Google, si no... mira el blog del ejemplo, carga y carga, pero no encuentra "mancha", por ejemplo.

Fabiana :
Este comentario ha sido eliminado por el autor.
Fabiana :

Equipo de BanakaBanaka! los espero por mi blog por ser un grupo que dedican su tiempo, esfuerzo y espacio en su blog para compartir y transmitir en forma desinteresada.
Ahhh! Adoréeeeeeeee el diseño!!!! Quisiera tener algo así en mi blog! Es una envidia sana, jeje.
PD: borré el comentario anterior por un horror ortográfico, jojo.

Iván_RG :

Jeje...Fabiana, cuánto tiempo!! muchas gracias, me alegro de que te haya gustado.
Enseguida pasamos por tu blog.

Anónimo :

... bueno :S espero no acerme muy vieja! :P

Desplegar Formulario
Subir

Deja aquí tu comentario:
(y recuerda que hemos retirado los "Nofollow")

Directorios
Blogs con EÑE directorio de blogs
Enlázanos
Código +/-

Código +/-

Código +/-
 

Formulario de Contacto


Lo quieres?

Nombre*: E-Mail*:

Asunto:

Mensaje*:

¿Cuantos lados tiene un Cuadrado?*:


(Los campos marcados con * son obligatorios)