21 octubre 2015

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

20 comentarios:

  1. Con el Html soy un desastre pero también porque no me he puesto, me guardo este post, porque me parece muy interesante incluir un buscador en mi blog :)

    ResponderEliminar
    Respuestas
    1. Yo también lo era, creía que nunca lo iba a entender, pero al final todo llega. De todas maneras, el tutorial es copiar y pegar y variar muy poquito. No es nada complicado y las visitas lo usan mucho ;)

      Eliminar
  2. 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
  3. Muchas gracias por el tutorial!! que chulas son y sin duda quedarán genial en el blog :)

    ResponderEliminar
  4. Hola!!! No conocía tu blog, y me quedo por aquí!! Muchas gracias por estas herramientas!! Besos!

    ResponderEliminar
    Respuestas
    1. Gracias María, yo también pasaré a verte, me hace falta pillar estilo ;)

      Eliminar
  5. 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
    Respuestas
    1. Precisamente el de las gafas, es uno de los que menos se pueden personalizar. Tan sólo permite usar una imagen de un color u otro, pero como cambies la imagen, no se ajustaran las posiciones y quedará descuadrado. Recojo lo de la mariposa para otra ocasión ;) muchas gracias por pasarte!

      Eliminar
  6. Hola!! me a encantado el de las gafas, un post super bueno, te cojo uno jaja, Un besito y hasta la proxima :D

    ResponderEliminar
  7. Estupendo Ire, mil gracias por pasarte ;)

    ResponderEliminar
  8. ¡Enamoradita del buscador de las gafas!
    Puse unas en lo de leer más, así que no descarto también ponerlas en el buscador (aunque tendré que mirar bien que color podría encajar más, o la manera de cambiarlo... bueno ya investigaré)
    Aunque no sea sobre el post en sí, grandioso descubrimiento que he hecho con tu blog. He estado cotilleando por encima y sin duda muchos de tus artículos me van a ir genial para mejorar mi blog (que lo necesita)
    ¡Besos!

    ResponderEliminar
  9. Muchísimas gracias Carolina, me alegra mucho que te haya gustado, esa es la intención, ayudaros en lo que pueda con vuestros blogs. En cuanto a lo de cambiarle el color, si entiendes un poquito de Photoshop, no te costará hacerlo con una superposición de colores. Y si no, también puedes optar por el color mina, que le va muy bien a tu blog. Un beso!

    ResponderEliminar
  10. 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
  11. Que original el de las gafas, me ha encantado :)
    Gracias por compartir
    Un beso

    ResponderEliminar
    Respuestas
    1. Gracias a ti por pasarte Irene, me alegra mucho que te haya gustado, es el que está teniendo más éxito, sin duda, viendo vuestros comentarios. Que tengas buen fin de semana, un beso!

      Eliminar
  12. Me han encantado todos!!!! Son muy chulos y nada aparatosos! Geniales!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Patricia, a mí me gusta darle un toque coqueto a todo pero sin perder sencillez. Tienes un blog muy limpio que invita a leer contenidos, felicidades! me iré pasando a ver si me resuelves los temas culinarios, que tus recetas tienen muy buena pinta. Un abrazo :)

      Eliminar

demo