Estiliza el nuevo formulario de Búsquedas Blogger

Compartir

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