Buscador flotante para Blogger

0
Category: , ,
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.




¿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 + &quot;search/&quot;' id='searchform' method='get'>
<input class='texto-input png_crop' id='edit-search-theme-form-keys' name='q' onblur='if (!value)value=&apos;Buscar&apos;' onclick='value=&apos;&apos;' 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/AVvXsEguq6K3m2JJeO6Ar-Zs2hd3IZfVrMdEV5VV7GJtd4Syjmm2J1i-yb1_qNTCboHg6SExSy_2o91hSShXxH5td7fHCTfqWhIRHQCcszx2koNOXspCMMQuc4N9rTYkhXngngumFpjL9JIJEHfK/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 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.


Importante: El buscador no se previsualiza bien en Internet Explorer por los atributos CSS3 por los que está compuesto.