Tener un buscador en tu blog es esencial para lograr que las visitas se queden en casa por más tiempo. Así que hoy te traigo 5 cajas de búsqueda muy atractivas, para mejorar tu marketing sin perder estilo. En cuanto termines de ver el vídeo, lo tendrás instalado.
¿Quieres ver los 5 modelos? aquí los tienes! no vas a saber cual elegir...
Aquí tienes los 5 buscadores.
Antes de empezar, te dejo el enlace a la extensión Colorzilla, para que puedas extraer fácilmente los tonos de tu blog.
También puedes visitar la entrada sobre Como crear un banner de suscripción, para conocer los tipos de líneas que puedes usar en los códigos CSS.
CÓDIGO INICIAL PARA LOS 3 PRIMEROS BUSCADORES
Si te has decidido por uno de los 3 primeros modelos de buscador, el código que tienes a continuacion, es el que tendrás que copiar al añadir un gadget en la parte de Diseño. Una vez lo tengas listo, podrás elegir el código CSS que más te guste, para personalizar tu buscador. Podrás encontrar cada código bajo su correspondiente imagen:
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Escribe lo que buscas' type='text'/>
<button id='search-button' type='submit'><span>Busca!</span></button>
</form>
</div>BUSCADOR CUADRADO
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 32px;
border: 1px solid #feacae;
background-color: #fff;
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 8px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 34px;
width: 80px;
font-size: 14px;
color: #555;
text-align: center;
line-height: 4px;
border-width: 0;
background-color: #cbf3ee;
cursor: pointer;
}
</style>
BUSCADOR IRREGULAR
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 32px;
border: 1px solid #cbf3ee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 15px;
background-color: #fff;
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 8px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 34px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 4px;
border-width: 0;
background-color: #feacae;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 15px 5px 0px;
cursor: pointer;
}
</style>BUSCADOR REDONDO
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 32px;
border: 1px solid #cbf3ee;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #fff;
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 8px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 34px;
width: 80px;
font-size: 14px;
color: #656;
text-align: center;
line-height: 4px;
border-width: 0;
background-color: #cbf3ee;
-webkit-border-radius: 0px 15px 15px;
-moz-border-radius: 0px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
cursor: pointer;
}
</style>BUSCADOR GAFAS
Este modelo de buscador, es el menos personalizable. Podrás elegir entre 10 colores, para adaptar el que más combine con los tonos de tu blog. Pero no podrás cambiar nada más (ni tamaño, ni posición, ni tipografía) porque de lo contrario, variarían las posiciones y no coincidirían los parámetros del botón y la caja de búsqueda. He intentado que sea lo más universal posible, por eso es ideal para un sidebar que mida entre 235-250px, pero si el tuyo es un poquito más ancho, tampoco pasa nada. Quedará algo más pequeño que el resto de elementos del sidebar y se situará a la izquierda, pero no queda mal.
Para instalar este buscador, elige primero el color que más te guste y copia la dirección de la imagen, que la encuentras justo debajo del nombre del buscador. Cópiala en la parte correspondiente del código y guarda los cambios. Si tienes dudas, mira el vídeo y lo colocarás en un momentín.
 AQUA http://i62.tinypic.com/1zpmhia.jpg |  AZUL CIELO http://i61.tinypic.com/10p64qo.jpg |  CIAN ELECTRICO http://i60.tinypic.com/2uro908.jpg |
 HOJAhttp://i61.tinypic.com/35k1q20.jpg |  MIELhttp://i58.tinypic.com/2s6tr2d.jpg |  MINAhttp://i58.tinypic.com/25gumaw.jpg |
 ROSA BEBÉ http://i58.tinypic.com/2drtmac.jpg |  CHICLEhttp://i62.tinypic.com/20kp0ns.jpg |  SANDÍAhttp://i62.tinypic.com/fyzhjr.jpg |
 PLOMO http://i61.tinypic.com/xnb7gx.jpg |
Copia el código y pega la url del color que más te guste:
<style type="text/css"> #w2b-searchbox{background:url(http://i62.tinypic.com/1zpmhia.jpg) no-repeat scroll center center transparent;
width:235px;
height:71px;
display:block;}
form#w2b-searchform{
display: block;
padding: 10px 12px;
margin:0;}
form#w2b-searchform #s{
padding: 5px;
margin-left: 10px;
margin-top:2px;
width: 140px;
font-size:14px;
vertical-align: top;
border:none;
background:#ffffff;}
form#w2b-searchform #sbutton{
margin-left:165px;
margin-top:-30px;
height: 60px;
width: 60px;
position: relative;
bottom: 0em;
vertical-align: top;
border:none;
background:transparent;}
</style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="" onfocus='if undefinedthis.value == "Search...") {this.value = ""}' onblur='if undefinedthis.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>BUSCADOR SENCILLO
Si tienes un blog de estilo "minimal", este es tu buscador perfecto. Copia el código inicial para pegarlo en un gadget HTML en la parte de diseño y una vez guardes los cambios, copia el siguiente código para "darle una manita de chapa y pintura" con CSS:
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="38" type="text" placeholder="Escribe y pulsa intro" /> <input id="search-btn" type="submit" value="GO" /></form>
#searchthis #search-btn{display:none;}
#searchthis #search-box{
background: transparent;
border:none;
color: #ced5a2;
border: 1px solid #ced5a2;
height:30px;
float: center;
width:197px;
font: normal normal 14px 'Arial';
letter-spacing: 1px;
text-align:center;
}Como ves, poder disfrutar de un buscador bonito, que haga la vida más fácil a los lectores de tu blog, es cuestión de pocos minutos. Espero que te haya servido mucho esta entrada y si es así, no dudes en compartirla, para que le pueda ser útil a más gente.
No te pierdas estos 5 buscadores (monísimos) para instalar en tu blog-Freebies + Videotutorial . Tuitéalo
Y ahora, llega el "momento cotorreo", que estoy deseando saber qué te han parecido estos 5 buscadores ¿cual has elegido? ¿has tenido algún problema para instalarlo? ¿tenías ya un buscador en tu blog?, te espero en los comentarios.
¡Que tengas una gran semana!
¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:
Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor, exclusivos para mis chicas, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.
¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo
