lunes, 1 de abril de 2013

Tutorial: Como poner un buscador interno estilo Google en tu blog

¡Comparte el tutorial!
Si te gusta que tu blog esté siempre con estilo y sea llamativo entonces este buscador interno para tu blog te va a a gustar.


Te mostramos paso a paso como colocar un buscador interno con el estilo de Google.

Puedes ver el resultado final en este blog [enlace]

Dificultad:

Fácil

Paso 1:

Coloca el siguiente código en un Gadget HTML/JavaScript:

<style type="text/css">
/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(http://2.bp.blogspot.com/-OlTpcdxjBDY/TjNnoH0sMJI/AAAAAAAAAH0/4P2_gkqd-9Y/s1600/ico-search.png) no-repeat #4d90fe center;
font-size:0;
padding: 1px;
margin: 0px 0px 0px 12px;
border: 1px solid #3079ED;
}
#search-box {
float:left;
width:250px;height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
}
/* Fin del codigo */
</style>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscas algo en especial?...&quot;;}' onfocus='if (this.value = &quot;Buscas algo en especial?...&quot;) {this.value = &quot;&quot;;}' type='text' value='Buscas algo en especial?...'/>
<input id='search-btn' type='submit' value=''/></form>

Si no queda bien, o queda desalineado igual que aquí:


Entonces prueba colocando este código en lugar del anterior:

<style type="text/css">
/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(http://2.bp.blogspot.com/-OlTpcdxjBDY/TjNnoH0sMJI/AAAAAAAAAH0/4P2_gkqd-9Y/s1600/ico-search.png) no-repeat #4d90fe center;
font-size:0;
position: relative;
top: 0px;
padding: 11px;
margin: 0px 0px 0px 4px;
border: 1px solid #3079ED;
}
#search-box {
float:left;
width:250px;height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
}
/* Fin del codigo */
</style>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscas algo en especial?...&quot;;}' onfocus='if (this.value = &quot;Buscas algo en especial?...&quot;) {this.value = &quot;&quot;;}' type='text' value='Buscas algo en especial?...'/>
<input id='search-btn' type='submit' value=''/></form>


El width:250px; en rojo es para el ancho de la caja, si deseas que sea más grande o más pequeña entonces modifica esa cantidad a tu gusto.

Fin del tutorial
Ayúdanos compartiendo esto
WhatsApp

En este momento hay comentario(s) sobre Tutorial: Como poner un buscador interno estilo Google en tu blog.


En este momento hay 7 comentarios sobre Tutorial: Como poner un buscador interno estilo Google en tu blog.
  1. me ha servido de gran ayuda, gracias
    http://elblogdechefi.blogspot.com.es/

    ResponderEliminar
  2. que chimba de pagina,esta una nota.........

    ResponderEliminar
  3. exelente! muchas gracias!! solo una cosa, para centrarlo como le hago??

    ResponderEliminar
    Respuestas
    1. Para centrarlo tienes que agregarle las etiquetas center, te invito a: http://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html

      Eliminar
  4. Me ha funcionado genial, ¡muchas gracias!

    ResponderEliminar

 
Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.