Buscador flotante para Blogger

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.
    Artículo aleatorio
    BuySellAds
    BuySellAds
    BuySellAds
    BuySellAds
    BuySellAds
    Artículos destacados
    Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
    Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
    Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
    Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
    Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger