Buscador flotante para Blogger
En esta oportunidad quise optimizar un poco los espacios del blog, por lo que decidí crear un buscador flotante que bajara con la página. Tiene la particularidad de ser adaptable y bastante personalizable.
Puedes ver un ejemplo del buscador en este blog de pruebas.
En ''Diseño | Edición HTML'' buscamos el siguiente código:
Ahora busca la siguiente línea:
Arriba de ésta, pega el siguiente código:
Guarda los cambios y listo.
Importante: El buscador no se previsualiza bien en Internet Explorer por los atributos CSS3 por los que está compuesto.
Puedes ver un ejemplo del buscador en este blog de pruebas.
¿Cómo añadirlo a Blogger?:
Paso 1: Añadiendo la sección:
En ''Diseño | Edición HTML'' buscamos el siguiente código:
</head>Debajo de éste, pegaremos el siguiente código:
<div id='barra_busqueda'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
<input class='texto-input png_crop' id='edit-search-theme-form-keys' name='q' onblur='if (!value)value='Buscar'' onclick='value=''' title='buscar' type='text' value=''/>
</form>
</div>
Paso 2: Añadiendo los estilos y atributos:
Ahora busca la siguiente línea:
]]></b:skin>
Arriba de ésta, pega el siguiente código:
#barra_busqueda {
padding:15px;
border-radius:14px 14px 0 0;
right:50px;
background: #000;
width:370px;
z-index:30;
bottom:0;
position:fixed;
}
.texto-input {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5OFirySnFXYj2j0EXLaPj2VV4n90KvX_yubWtyCPCfiouuTEcEIcZKQ-IeXzQiazR8yZDybnbAaFSzy8MEK1hiUQALm_lR-b4rcWSCuB-nnk8x50-K2QkBs5CI0oyuyxhQoZx4crDP1wF/s1600/s-form.png) no-repeat scroll 0 0;
border:medium none;
color:#ddd;
-moz-opacity:0.65;
opacity:0.65;
filter:alpha(opacity=′65′);
font-family:Arial;
font-size:13px;
height:26px;
margin:0 auto;
margin-left:40px;
padding:0px 10px 0 38px;
width:240px;
}
Guarda los cambios y listo.
Consideraciones:
- Para modificar el color del buscador reemplaza:
background: #000;
- El valor #000, corresponde a negro, deberás reemplazar por el color que quieras poner al buscador. Te recomiendo que utilices las herramientas de colores de mi blog para escoger un color.
- El valor .text-input, corresponde al formulario. Este tiene un atributo de transparencia por lo que si deseas cambiar el color del buscador, cambiará de forma completa.
