Contar con un buscador en nuestro blog es muy importante, es una manera de facilitar el trabajo a quienes nos visitan a la hora de buscar distintos contenidos en el sitio. En esta publicación veremos como añadir un buscador personalizado a nuestro blog, como siempre de un modo rápido y sencillo.
A continuación una muestra de como se verá el buscador:
Para agregar el buscador de la imagen anterior a tu blog vas a: Diseño -> Elementos de pagina. Si estas usando la nueva versión de Blogger, es casi lo mismo, solo tienes que dirigirte a diseño.
Una vez ahí tendrás que crear un nuevo gadget: HTML/Javascript. En la siguiente imagen vemos los pasos a seguir:
Ahora solo tienes que pegar el siguiente código en el gadget que acabas de crear:
<style>
#search-btn {
background-color:#666666;
color:#FFFFFF;
margin:0;
font:bold 12px Trebuchet MS;
border:0;
}
#search-btn:hover {
cursor:pointer;
background-color:#000000;
}
#search-box {
color:#666666;
margin:0;
font:bold 12px Trebuchet MS;
border:1px solid #AAAAAA;
width:175px;
}
</style>
<div style="text-align: rigth;"><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text" value="Buscar en el blog..." onfocus="if(this.value=='Buscar en el blog...')this.value=''" />
<input id="search-btn" value="BUSCAR" type="submit"/>
</form></div>
Eso es todo, ¿bastante fácil verdad? Ahora ya cuentas con un buscador en tu blog, a este le podrás modificar los colores, tipografía y tamaño para adaptarlo al diseño de tu sitio web.
Fuente: http://www.ubuntronics.com/2011/08/agregar-un-buscador-tu-blog-blogger.html
A continuación una muestra de como se verá el buscador:
Para agregar el buscador de la imagen anterior a tu blog vas a: Diseño -> Elementos de pagina. Si estas usando la nueva versión de Blogger, es casi lo mismo, solo tienes que dirigirte a diseño.
Una vez ahí tendrás que crear un nuevo gadget: HTML/Javascript. En la siguiente imagen vemos los pasos a seguir:
Ahora solo tienes que pegar el siguiente código en el gadget que acabas de crear:
<style>
#search-btn {
background-color:#666666;
color:#FFFFFF;
margin:0;
font:bold 12px Trebuchet MS;
border:0;
}
#search-btn:hover {
cursor:pointer;
background-color:#000000;
}
#search-box {
color:#666666;
margin:0;
font:bold 12px Trebuchet MS;
border:1px solid #AAAAAA;
width:175px;
}
</style>
<div style="text-align: rigth;"><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text" value="Buscar en el blog..." onfocus="if(this.value=='Buscar en el blog...')this.value=''" />
<input id="search-btn" value="BUSCAR" type="submit"/>
</form></div>
Eso es todo, ¿bastante fácil verdad? Ahora ya cuentas con un buscador en tu blog, a este le podrás modificar los colores, tipografía y tamaño para adaptarlo al diseño de tu sitio web.
Fuente: http://www.ubuntronics.com/2011/08/agregar-un-buscador-tu-blog-blogger.html