Espera unos segundos se esta Cargando...

Buscador Responsive en el blog

12 de septiembre de 2016



En un post anterior mostré como poner un Buscador personalizado para el blog, ahora explicare como añadir un buscador adaptable en el blog de blogger.
Buscador Responsive en el blog


Una de las mayores ventajas de este cuadro de búsqueda, es lo fácil que es de añadir y personalizar.

El editor de blogger tiene una opción. Abres el editor y vas a DiseñoAñadir un GadgetHTML/Javascript y copias el código.



<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Buscar...' type='text'/>
<button id='search-button' type='submit'><span><i class='fa fa-search'/></i></span></button>
</form>
</div>
<style>
.search-box{color:#ffffff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
#search-box{position:relative;margin:0 auto;border:1px solid #cccccc;padding:5px;border-radius:4px}
#search-form{height:40px;background:#ffffff;overflow:hidden}
#search-text{font-size:14px;color:#3b8686;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:40px;color:#ffffff;text-align:center;border-width:0;background:#C10000;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#3b8686}
</style>

Importante tienes que tener instalado en el HTML de la plantilla FontAwesome.

Si no lo tienes ir a la plantilla ► Editar HTML.
En el buscador ► Presionando CTRL+F pegar <head> debajo de el pegar :

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>



  • Para cambiar el color del botón de busquedad cambiar los siguiente codigos: background:#C10000 y background:#3b8686 
  • Ver tabla de colores hexadecimales.


Para terminar haz click en guardar y listo.


-

No hay comentarios -

Publicar un comentario

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger