AyudaBloggers{...}
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.


¿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(http://3.bp.blogspot.com/_AxdTtBbEEYQ/TKa2eE1-4UI/AAAAAAAACAY/c56KAnwBvA0/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.


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

    Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

    Moderador en +TBEE y escritor/fundador de este blog.

    tweet

    Blogroll de Ayuda Bloggers