Buscador estilo "Minimal" elegante para el blog


(@merynettle esto va por ti jejeje :D)
Personalmente el diseño del buscador predeterminado que te viene en Blogger no me gusta. Es muy, por así decirlo, "serial". Todo el mundo tiene el mismo, no es nada original.

Así que emprendí una búsqueda por la red, para ver si encontraba algún buscador de esos que se pueden tunear hasta las trancas. Y lo encontré. Su instalación es muy fácil, y además es 100% tuneable. La única pega que tiene el menú es que tiene dos partes en su instalación: una que hemos de instalar un elemento gadget, y otra que hemos de tocar el HTML de la plantilla. Pero no tiene pérdida. Pongámonos manos a la obra.

Primero de todo, desde nuestro panel de control del blog,  vamos a DISEÑO >> AÑADIR UN GADGET, y elegimos la opción de HTML/JAVASCRIPT. Luego añadimos el código que os dejo a continuación:


<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="38" type="text" placeholder="BUSCA LO QUE QUIERAS" /> <input id="search-btn" type="submit" value="GO" /></form>



Pero esto no es todo. De momento sólo tenemos el gadget que se mostrará en la página. Si vais a vuestro blog, veréis que se ve un gadget soso, cómo el de Blogger. Le falta el tuneo. Lo que está en color amarillo, es el texto que se muestra antes de dar clic y escribir lo que queremos buscar. Esto lo podéis cambiar por lo que vosotros queráis, cómo por ejemplo SI TE HAS PERDIDO BUSCA AQUÍ o algo por el estilo.

Para añadir la parte de código que tuneará nuestro buscador, vamos a PLANTILLA >> EDITAR HTML. Una vez dentro buscamos (Cómo buscar códigos en el cuadro de códigos HTML de Blogger ) la siguiente línea:  ]]></b:skin> 

Arriba de ]]></b:skin>, tenéis que colocar el siguiente código:

#searchthis #search-btn{display:none;}
#searchthis #search-box{
background: transparent;
border:none;
color: #000;
border: 1px solid #eeeeee;
height:34px;
float: center;
width:212px;
font: normal normal 10px 'Arial', ans-serif;
letter-spacing: 1px;
text-align:center;
}



Le dais a guardar y ya está. Ahora cuando volváis a entrar en vuestro blog, os aparecerá el gadget totalmente personalizado, sin el botón que decía GO. Para buscar sólo tendréis que escribir lo que queráis buscar y darle a ENTER. 

NOTAS: Para cambiar los colores (Azul) sólo tenéis que borrar el código del color que hay (#color). En el caso del BACHGROUND, que es el fondo del buscador, lo he puesto en TRANSPARENT, para que salga el color del fondo de vustra sidebar, o dónde queráis ponerlo. La anchura o WIDTH, es de 212 píxeles. Si lo aumentáis, se hará más ancho, y si lo disminuis, se hará mas corto. La opción de HEIGHT, es la altura. Funciona igual que la anchura. El COLOR, marca el color del texto del buscador.  
La opción LETTER-SPACING, marca la separación de las letras del buscador. Si no queréis una separación, solo cal poner el número a 0, y la separación se anula. 

¡Espero que os sirva tanto como a mí!
Nos vemos

El autor.



John Grey

Estudiante de letras y futuro proyecto de corrector. Amante de los buenos libros acompañados de una buena trama. Me caí por la madriguera del conejo blanco... y desde ahí escribo. Curioso del HTML y algo parecido a un intento de escritor. Ya que has hecho el esfuerzo de leer mi pequeña bio, solo decirte ¡HOLA :D! Twitter  Blog



16 comentarios:

  1. ¡Súper interesante! ¡Yo ya lo instalé en mi blog y ha quedado de 10! ¡Gracias! ^^

    ResponderEliminar
  2. ¡Me encanto el buscador! tenia tiempo buscando un buscador simple, simplemente genial :D Muchas Gracias :D

    ResponderEliminar
  3. Hola, me vino re bien, pero tengo este problema, necesito que los resultados los ordene alfabéticamente, en una blog tipo catalogo, y al buscar un nombre "x" puede dar muchos resultados.. Gracias..

    ResponderEliminar
  4. Lo he hecho igual y te digo que igual me sale el boton GO, y es horrible, alguna idea?

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Yo tengo una: si modificas el gadget sugerido en esta entrada tal como indico, no solo desaparecerá el molesto botón, sino que ni siquiera será necesario editar posteriormente la plantilla para añadir código:

      <form action="/search" id="searchthis" method="get" style="display: inline;">
      <input id="search-box" name="q" size="38" type="text" placeholder="BUSCAR" /></form>

      Un saludo.

      Eliminar
  5. Acabo de utilizarlo, la verdad es que me gusta más que cualquier otro que he encontrado por la red. Un buen tutorial, un saludo.

    ResponderEliminar
  6. Muy interesante el estilo de este buscador. Te invitamos a visitar nuestros blog www.rincondelcomecocos.com. Buscamos colaborador@s y blogs para compartir banners. Un saludo y mucha suerte con este blog.

    ResponderEliminar
  7. Thanks for taking the time to talk about this, I really feel strongly about it and appreciate understanding
    Garcinia Cambogia Pure Select extra on this topic. If achievable, as you acquire expertise, would you thoughts updating your weblog with far more details? It is extremely helpful for me.I like the write-up, the point in which the site is actually a tiny little bit unique tends to make it so useful, I actually get fed up of viewing the exact outdated monotonous recycled stuff just about all of the time.This makes me somewhat upset. http://www.supplements4help.com/garcinia-cambogia-pure-select/

    ResponderEliminar
  8. Hola que buen buscador, lo instale en mi blogspot ganaconwally dentro de la barra de menú horizontal, lo único que le modifique fue el color de fondo ¿pero ahora como hago para que quede totalmente a la derecha de la barra del menú?
    Agradezco su ayuda

    ResponderEliminar
  9. Hola que buen buscador, lo instale en mi blogspot ganaconwally dentro de la barra de menú horizontal, lo único que le modifique fue el color de fondo ¿pero ahora como hago para que quede totalmente a la derecha de la barra del menú?
    Agradezco su ayuda

    ResponderEliminar
  10. Y como hago para que al escribir dentro del buscador, la letra sea mayuscula por defecto?

    ResponderEliminar
  11. Amigo ¿cómo hago para se se expanda al abrirlo como está en tu blog? porfa, responde.

    ResponderEliminar
  12. no me ha quedado :( hiba muy bien pero no pude encontrar el html ayudaaa pliss

    ResponderEliminar
  13. Hola y como haría para colocarle un max-results cuando realice la búsqueda?

    ResponderEliminar

 

Facebook

Si tienes algún problema con tu plantilla, quieres recomendarnos algún tutorial o simplemente quieres estar al tanto de todas las novedades de HTML Para Torpes, puedes seguir nuestra página en Facebook.

Torpes

We use...

A veces el HTML y el CSS producen verdaderos dolores de cabeza. Aquí intentaremos solucionarlos de la forma más sencilla posible.

HTML para Torpes está formado por un grupo de blogueros interesados por el diseño web que colaboran de forma desinteresada, por lo que pedimos comprensión a la hora de evaluar el contenido y agradecemos cualquier sugerencia.

Siempre con la tecnología de: