Seguro que muchos de ustedes han visto que con el nuevo diseño de Google su buscador tambien ha cambiado de diseño y algunos han quedado fascinados con dicho diseño y han querido agregarlo en sus blogs de Blogger, pues bien hoy les enseñare como agregar un buscador interno con el estilo del buscador de Google.


Para agregar este truco primero debes agregar los estilos arriba de ]]></b:skin> :

/* 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:300px;
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 */

Ahora solo queda añadir el cuerpo del buscador y esto lo haces pegando en un Elemento HTML/JavaScript lo siguiente:

<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=''/></form>

Con width:300px; puedes ajustar el ancho del buscador de acuerdo a tu blog.

Via/CoquitoBlogger


8 comentarios

Anonymous · octubre 20, 2012 a las 6:51 pm

Excelente, tengo una idea sabes como colocar unas flechas
una en la lado izquierdo y la otra en el derecho
para pasar de una entrada a otra como los sitio web modernos

Osman Leiva · octubre 22, 2012 a las 8:24 pm

buscador interno o con CSE? prefiero el interno y bloquear los parametros de las URLs

    Juvinao · octubre 23, 2012 a las 1:16 am

    Amigo este es un buscador interno :LOL:

J I C · noviembre 12, 2012 a las 1:31 am

Pues mi estimado a pesar de tener ya un buscador en mi blog, me parece interesante este buscador con un codigo distinto al mio.

jeferson andres · febrero 19, 2013 a las 7:09 pm

esta genial 😎

Ihueghian Edodo · marzo 2, 2013 a las 12:54 pm

Perdona, no he entendido nada, donde se supone que debo pegar los datos?

    Hayder Juvinao · marzo 2, 2013 a las 10:57 pm

    Debes pegar el código en Diseño, Añadir gadget, HTML/Javascript

Responder a Ihueghian Edodo Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *