5 buscadores (monísimos) que podrás personalizar de 1000 maneras [Freebies+Tutorial]




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. 




¿Cual te gusta más? ¿ya te has decidido? espera, espera... antes de nada, mira el vídeo que tienes a continuación, para que lo instales correctamente ¿vale? y una vez lo termines, podrás disfrutar de tu nuevo buscador 





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.



buscador gafas aqua
AQUA
http://i62.tinypic.com/1zpmhia.jpg
buscador gafas azul cielo
AZUL CIELO
http://i61.tinypic.com/10p64qo.jpg
buscador gafas cian electrico
CIAN ELECTRICO
http://i60.tinypic.com/2uro908.jpg
buscador gafas hojasHOJA
http://i61.tinypic.com/35k1q20.jpg
buscador gafas mielMIEL
http://i58.tinypic.com/2s6tr2d.jpg
buscador gafas minaMINA
http://i58.tinypic.com/25gumaw.jpg
buscador gafas rosa bebe
ROSA BEBÉ
http://i58.tinypic.com/2drtmac.jpg
buscador gafas rosa chicleCHICLE
http://i62.tinypic.com/20kp0ns.jpg
buscador gafas sandiaSANDÍA
http://i62.tinypic.com/fyzhjr.jpg
buscador gafas plomo
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   


 Únete a la Comunida Demo 2.0

Comentarios

  1. Muchas gracias! A ver si saco un poco de tiempo y lo personalizo

    ResponderEliminar
    Respuestas
    1. Claro que sí, tienes un blog muy limpio y agradable, el buscador sencillo con uno de tus tonos te iría genial. Y ya no necesitarias la nabvar de Blogger, que le quita elegancia al blog. Gracias por pasarte!

      Eliminar
  2. Muchas gracias por el tutorial!! que chulas son y sin duda quedarán genial en el blog :)

    ResponderEliminar
  3. Me encatan! me quedo con el de las gafas! hay algo para cambiar el símbolo? mmm yo me pondría mi logo una mariposa.
    besitos
    amglez

    ResponderEliminar
  4. Ah! Muchas gracias, me encanta el de las gafitas!!! Lo voy a utilizar en mi blog, te pasaré link para que lo veas. Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Oiana, te quedará muy bien, tienes un blog muy bonito. Encantada de que lo pongas y me avises, un saludo!

      Eliminar

Publicar un comentario