Buscadores personalizados para blogger


Hola, hola!! Cómo está yendo la semana?? La mía un poco, bastante caótica, entre una cosa y otra no he podido hacer todo lo que quería, será que algunas veces me exijo demasiado y mi cuerpo se pone de huelga. Por si tenía poco con  un cerebro rebelde e independiente... ahora también se está rebelando mi cuerpo. He tenido días tontos... por eso no terminado de contestar e-mails y comentarios... Nadie es perfecto, qué le vamos a hacer.  

Vale de lamentos y penitas, esto no puede ser!!! Pero bueno, pese a las adversidades... aquí estoy, un jueves más, con otro tutorial!! De todos modos a ver si mi VALENTÍN lee esto, le doy un poco de penica (aunque ha tenido paciencia conmigo estos días) y cae algo... que no sea ir a ver La Jungla de Cristal el viernes.  También podéis presionarle en los comentarios diciéndole: Iker, no le obligues a ir a ver Jungla de Cristal y lleva a May a ver una peli de verdad o a comer tiramisú del bueno bueno!! :)

Hoy aprenderemos a poner un buscador algo diferente al predeterminado por blogger. Es muy sencillito (pese a que veáis un montón de códigos raros) y podéis conseguir un buscador como el que yo tengo a la derecha.

En esta página tenéis, aunque sea en inglés, las instrucciones para colocarlo. Pero bueno, os echaré una manica explicando paso a paso qué es lo que tenéis que hacer... y cómo modificarlos. No os asustéis, va a aparecer mucho código pero, en realidad, es muy poquito lo que tenéis que cambiar del código original (solo las partes que veis resaltadas con color). 

Esta entrada es para mirarla y seguirla paso a paso. Si la leéis por encima quizá os volváis locos, pero si seguís los pasos con tranquilidad, seguro que os va a quedar perfecto. Os lo prometo.


Estos buscadores se instalan añadiendo un GADGET HTML en vuestro menú de diseño. Tan sencillo como eso. Los pasos que debemos seguir son los siguientes:

1. copiamos el siguiente código
<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    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: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    cursor: pointer;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search TechFrost' type='text'/>
    <button id='search-button' type='submit'><span>Search</span></button>
  </form>
</div>

  • copiamos todo el código anterior
  • Lo pegamos en el Gadget HTML 
  • Guardamos 
  • Lo colocamos donde queramos.
Así de fácil. Con esto conseguiremos el buscador de color azul (el primero que sale en la foto), eso sí, en inglés... Lo podemos dejar así, pero si queréis podemos ir un poquito más allá y cambiar algunas cosillas para conseguir un buscador algo más personal. 

Ahora os voy a explicar un poquito qué son las letras y números resaltados. Aunque yo os voy a dar las explicaciones por partes, todas las modificaciones tenéis que hacerlas sobre el mismo código, el código que está justo arriba

Para comprobar cómo os queda el buscador, solo tenéis que guardar el gadget y darle a vista previa. Así veremos cómo está quedando el resultado. Si no nos convence, volvemos al GADGET y seguimos trasteando. 



modificación sencilla: cambiar color del botón y texto

Esta modificación nos va a permitir cambiar el color del botón de buscar y cambiar el texto de Search y Search TechFrost por el texto que más nos guste.

las modificaciones

Relative: 
Este código permite que nuestro buscador, de forma automática, adapte su tamaño, al lugar en el que lo colocamos. Así que esto no lo tocaremos.

Width: 100%
Este es el tamaño del buscador. En principio podéis dejarlo así, para no complicar las cosas. 

background-color: #4d90fe 
Este es el color de la cajita donde pone Search. Podemos cambiar el color por el que más nos guste. En esta página podéis encontrar todos los colores del mundo y sus correspondientes códigos. Para cambiarlos solo tenéis que dejar este símbolo # y colocar, justo después, el código del color que más os guste.

Search TechFrost: 
Este es el texto que aparece dentro de la cajita del buscador. Podemos ponerlo que queramos. Escribiremos dentro de las comillas.

Search: 
Este es el texto del botón. Lo podemos cambiar por buscar.

cambiar tamaño y color de la fuente
Podemos ir un poquito más allá y cambiar el color del texto del botón de buscar. En el ejemplo anterior el color del texto es el que viene predeterminado por la página de la que hemos pegado el código. Ahora vamos a trabajar sobre la siguiente parte del código:

#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    cursor: pointer;
LAS MODIFICACIONES


Para cambiar el color del texto volvemos a la página donde aparecen los códigos de color, buscamos el color que nos guste, y lo copiamos en la parte resaltada con azul.

Puede ser que cuando escribamos algo en nuestro botón de buscar (donde hemos puesto el color) no nos quepa. Entonces cambiaremos el tamaño de la fuente, la haremos un poquito más pequeña para que entre, perfectamente, en nuestro botón. Cambiamos la parte resaltada en verde. Por defecto son 14px, pero podemos poner el tamaño que queramos, 12px, 10px...


poner fondo a la caja de búsqueda
También podemos modificar el color de la cajita de búsqueda, el lugar donde nosotros escribimos lo que estamos buscando.Vamos a trabajar sobre la siguiente parte del código:

#search-text {


    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
las modificaciones

El color verde nos indica el tamaño de la fuente del texto que hemos escrito dentro de la cajita. Podemos poner el texto más grande o más pequeño. Colocamos el tamaño que queramos y siempre escribimos después px. No borréis el punto y coma nunca.

El color morado nos indica el color del texto. Para cambiarlo vais a la página de antes, elegimos el color y lo pegamos detrás de #

El color amarillo nos señala el color del fondo de la cajita. En este caso es transparente, sin color. Pero podemos poner el color que nos de la gana. Para hacerlo, borraremos transparent y en su lugar colocaremos # seguido del código de color que queramos.

De todos modos yo os recomiendo que, en la cajita donde escribimos lo que buscamos lo mejor es que pongamos un fondo blanco o transparente y un color de fuente gris o negro. 
Cambiar el estilo de las líneas
También podemos cambiar el color y el estilo de la línea del buscador. Es muy fácil. Tenemos que ir a esta parte del código:

#search-form {


    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: #fff;
    overflow: hidden;
las modificaciones

Border es el código utilizado para nombrar el borde de nuestro buscador.

1px es la anchura de la línea. Si queremos que la línea sea más ancha pondremos un número mayor, aunque no os lo recomiendo.

Solid: la linea es sólida, sin puntitos. Si queremos poner puntitos cambiamos solid por dotted.

#999 es el color de la línea. En la página que os he indicado más arriba, podéis elegir un color y cambiarlo. Así conseguiréis el color de línea que queráis.

Si no queremos líneas en la fila naranja pegaremos:  border: none;


cambiar fuentes

  • Esto ya es la guinda del pastel. Podemos cambiar el tipo de fuente del buscador. Para ello os recomiendo que vayáis a esta página
  • Elegís la letra que más os guste. 
  • Pincháis sobre ella y automáticamente os copiará un código. No hace falta que le deis a copiar y pegar 
  • Ahora vais a la siguiente parte del código y pegamos con el ratón el código de la fuente justo debajo de WIDTH:
Megapack
elige los 5 cursos que tú quieras
Curso
presentaciones
con power point
Pack
Pequeño gran emprendedor
Curso
diseña tu marca
personal
precio: 75€
precio: 17€
precio: 52€
precio: 35€
catálogo completo 
de cursos online
Y esto es todo. Espero que no haya cundido el pánico. Sé que sois capaces de hacerlo. Solo tenéis que buscar un ratito y hacerlo. Cuando lo hagáis me comentáis por facebook vuestros avances, que ya sabéis que me gusta verlos.

Y esto es todo por hoy, el domingo tenemos el diario de las buenas noticias!!! Un beso grande y a disfrutar del finde!!!


N E W S L E T T E R

Al suscribirte a esta cartica recibirás noticias exclusivas, descuentos, preventas y material exclusivo para gente VIP. 


Tus datos serán tratados de acuerdo a la política de privacidad, faltaría más. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com



SI TE HA GUSTADO ¡COMPÁRTELO!
Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

Otros posts intersantes: