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.
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ño ▶ Añadir un Gadget ▶ HTML/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