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