Buscador en la cabecera del blog
Labels:
Trucos
at
lunes, diciembre 01, 2014
Tal vez queramos darle un toque más profesional a nuestro blog y deseamos tener el buscador en la cabecera del blog. Esto es posible modificando el HTML de la plantilla de nuestro blog de Blogger.
Diseño → Plantilla → Editar HTML → Crtl + f
Header1marcara una linea similar a esta
<b:widget id='Header1' locked='true' title=' Titulo del Blog (cabecera)' type='Header'/>
</b:section>
Ahora, debajo de </b:section> pega esto:
<div><form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form>
</div>
►Personalizar el buscador de nuestro blog
ir a:Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
En el recuadro pegar el Código:
/*Buscador
------------*/
#searchthis{
position: absolute;
top:60px;
left:630px;
float: left;
}
#search-btn {
background-color:#33aaff;
color:#FFFFFF;
margin:0;
font:bold 14px Tahoma;
border:0;
float: left;
}
#search-btn:hover {
cursor:pointer;
background-color:#2E9AFE;
}
#search-box {
color:#2E9AFE;
margin:0;
font:bold 12px Arial;
border: 1px solid #CEE3F6;
width:150px;
}
Así tendrás tu buscador en la cabecera del blog en blogger.
Si te gusta la entrada compártela.
¡Gracias!
Copyright © 2013
Cambio-Cambie Blogger
Diseñado por CCB Desarrollado por Blogger
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.
►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>
No olvides suscribirte para recibir las actualizaciones