Buscadores personalizados para blogger

14 feb. 2013

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: 
  • 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: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 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>
  • 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. 




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. 

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. 

Ejemplo código modificado: 


Este apartado va a aparecer en todas las modificaciones que haga, las resaltaré con colores. Así veréis los cambios que voy haciendo y el resultado que obtenemos. Simplemente es una ayuda.

<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    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: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 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='¿Qué buscas?' type='text'/>
    <button id='search-button' type='submit'><span>Buscar</span></button>
  </form>
</div>

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;

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... 

Ejemplo código modificado:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #3A3A3A;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;



Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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;

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 pxNo 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. 



Ejemplo código modificado:

#search-text {
    font-size: 12px;
    color: #3A3A3A;
    border-width: 0;
    background: #FDDCEE;


Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.



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. Este sería el código que tendríamos que poner para conseguirlo:

#search-text {
    font-size: 12px;
    color: #D0D0D0;
    border-width: 0;
    background: #FFFFFF;





Otra opción es colocar un fondo, como tengo puesto yo en mi buscador.  Para ello volvemos a esta parte del código, a la parte que corresponde al botón de buscar. 

#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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Antes hemos visto que podemos modificar el color sustituyendo el código BACKGROUND-COLOR por el código del color que queramos. También existe la opción de poner un fondo. Para ello haremos lo siguiente:
  • Buscar una imagen
  • Guardarla en nuestro ordenador
  • Subirla a algún lugar: album picasa, dropbox... 
  • Una vez subida pincharemos con el botón derecho la imagen y copiaremos la URL.



Os recomiendo hacer esto, guardar y subir la imagen, porque si copiamos, directamente, la dirección URL de la imagen... puede suceder que la persona que haya subido la imagen o la web en la que esté desaparezca, entonces nos quedaremos sin fondo en el buscador. Aunque podemos volver a colocar otro. Esto os lo dejo a vuestra elección, es solo una recomendación. 


Una vez que tengamos la URL copiada vamos al lugar del código anterior donde pone Backround-color, borramos -color y, justo después de los dos puntos ponemos lo siguiente:


URL(pegamos la URL DE LA IMAGEN)repeat;


De esta manera ya tendremos un estampado en nuestro botón de buscar. Nos tendría que quedar algo así:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #5D5D5D;

    text-align: center;
    line-height: 42px;
    border-width: 0;
background:URL(pegamos la URL DE LA IMAGEN)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Ejemplo código modificado:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #5D5D5D;
    text-align: center;
    line-height: 42px;
    border-width: 0;
background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;

Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

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.


#search-form {
    height: 40px;
    border: 1px dotted #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

#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. 


#search-form {
    height: 40px;
    border: 1px dotted #DDDDDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

Otra opción es quitar las líneas. Para ello pondremos lo siguiente:


#search-form {
    height: 40px;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;



Ejemplo código modificado:

#search-form {
    height: 40px;
    border: 1px dotted #DDDDDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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:
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    font-size: 16px;
    color: #5D5D5D;
    text-align: center;
    line-height: 42px;
    border-width: 0;
background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.







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!!!

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: 
  • 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: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 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>
  • 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. 




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. 

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. 

Ejemplo código modificado: 


Este apartado va a aparecer en todas las modificaciones que haga, las resaltaré con colores. Así veréis los cambios que voy haciendo y el resultado que obtenemos. Simplemente es una ayuda.

<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    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: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 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='¿Qué buscas?' type='text'/>
    <button id='search-button' type='submit'><span>Buscar</span></button>
  </form>
</div>

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;

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... 

Ejemplo código modificado:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #3A3A3A;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;



Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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;

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 pxNo 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. 



Ejemplo código modificado:

#search-text {
    font-size: 12px;
    color: #3A3A3A;
    border-width: 0;
    background: #FDDCEE;


Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.



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. Este sería el código que tendríamos que poner para conseguirlo:

#search-text {
    font-size: 12px;
    color: #D0D0D0;
    border-width: 0;
    background: #FFFFFF;





Otra opción es colocar un fondo, como tengo puesto yo en mi buscador.  Para ello volvemos a esta parte del código, a la parte que corresponde al botón de buscar. 

#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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Antes hemos visto que podemos modificar el color sustituyendo el código BACKGROUND-COLOR por el código del color que queramos. También existe la opción de poner un fondo. Para ello haremos lo siguiente:
  • Buscar una imagen
  • Guardarla en nuestro ordenador
  • Subirla a algún lugar: album picasa, dropbox... 
  • Una vez subida pincharemos con el botón derecho la imagen y copiaremos la URL.



Os recomiendo hacer esto, guardar y subir la imagen, porque si copiamos, directamente, la dirección URL de la imagen... puede suceder que la persona que haya subido la imagen o la web en la que esté desaparezca, entonces nos quedaremos sin fondo en el buscador. Aunque podemos volver a colocar otro. Esto os lo dejo a vuestra elección, es solo una recomendación. 


Una vez que tengamos la URL copiada vamos al lugar del código anterior donde pone Backround-color, borramos -color y, justo después de los dos puntos ponemos lo siguiente:


URL(pegamos la URL DE LA IMAGEN)repeat;


De esta manera ya tendremos un estampado en nuestro botón de buscar. Nos tendría que quedar algo así:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #5D5D5D;

    text-align: center;
    line-height: 42px;
    border-width: 0;
background:URL(pegamos la URL DE LA IMAGEN)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Ejemplo código modificado:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #5D5D5D;
    text-align: center;
    line-height: 42px;
    border-width: 0;
background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;

Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

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.


#search-form {
    height: 40px;
    border: 1px dotted #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

#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. 


#search-form {
    height: 40px;
    border: 1px dotted #DDDDDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

Otra opción es quitar las líneas. Para ello pondremos lo siguiente:


#search-form {
    height: 40px;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;



Ejemplo código modificado:

#search-form {
    height: 40px;
    border: 1px dotted #DDDDDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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:
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    font-size: 16px;
    color: #5D5D5D;
    text-align: center;
    line-height: 42px;
    border-width: 0;
background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.







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!!!

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: 
  • 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: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 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>
  • 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. 




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. 

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. 

Ejemplo código modificado: 


Este apartado va a aparecer en todas las modificaciones que haga, las resaltaré con colores. Así veréis los cambios que voy haciendo y el resultado que obtenemos. Simplemente es una ayuda.

<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    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: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 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='¿Qué buscas?' type='text'/>
    <button id='search-button' type='submit'><span>Buscar</span></button>
  </form>
</div>

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;

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... 

Ejemplo código modificado:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #3A3A3A;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;



Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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;

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 pxNo 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. 



Ejemplo código modificado:

#search-text {
    font-size: 12px;
    color: #3A3A3A;
    border-width: 0;
    background: #FDDCEE;


Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.



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. Este sería el código que tendríamos que poner para conseguirlo:

#search-text {
    font-size: 12px;
    color: #D0D0D0;
    border-width: 0;
    background: #FFFFFF;





Otra opción es colocar un fondo, como tengo puesto yo en mi buscador.  Para ello volvemos a esta parte del código, a la parte que corresponde al botón de buscar. 

#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 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Antes hemos visto que podemos modificar el color sustituyendo el código BACKGROUND-COLOR por el código del color que queramos. También existe la opción de poner un fondo. Para ello haremos lo siguiente:
  • Buscar una imagen
  • Guardarla en nuestro ordenador
  • Subirla a algún lugar: album picasa, dropbox... 
  • Una vez subida pincharemos con el botón derecho la imagen y copiaremos la URL.



Os recomiendo hacer esto, guardar y subir la imagen, porque si copiamos, directamente, la dirección URL de la imagen... puede suceder que la persona que haya subido la imagen o la web en la que esté desaparezca, entonces nos quedaremos sin fondo en el buscador. Aunque podemos volver a colocar otro. Esto os lo dejo a vuestra elección, es solo una recomendación. 


Una vez que tengamos la URL copiada vamos al lugar del código anterior donde pone Backround-color, borramos -color y, justo después de los dos puntos ponemos lo siguiente:


URL(pegamos la URL DE LA IMAGEN)repeat;


De esta manera ya tendremos un estampado en nuestro botón de buscar. Nos tendría que quedar algo así:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #5D5D5D;

    text-align: center;
    line-height: 42px;
    border-width: 0;
background:URL(pegamos la URL DE LA IMAGEN)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Ejemplo código modificado:


#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 16px;
    color: #5D5D5D;
    text-align: center;
    line-height: 42px;
    border-width: 0;
background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;

Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

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.


#search-form {
    height: 40px;
    border: 1px dotted #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

#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. 


#search-form {
    height: 40px;
    border: 1px dotted #DDDDDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

Otra opción es quitar las líneas. Para ello pondremos lo siguiente:


#search-form {
    height: 40px;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;



Ejemplo código modificado:

#search-form {
    height: 40px;
    border: 1px dotted #DDDDDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.




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:
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    font-size: 16px;
    color: #5D5D5D;
    text-align: center;
    line-height: 42px;
    border-width: 0;
background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;


Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.







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!!!

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

90 comentarios:

  1. Yo alucino con el dominio que tienes en HTML!!
    En la carrera tuve una asignatura de informática y una de sus partes era programar, que mal se me daba! menos mal que en excel era una máquina que si no...
    Cuando tenga un rato me personalizo mi buscador
    Un beso

    MY WHITE IDEA

    ResponderEliminar
    Respuestas
    1. Dominio nada de nada!!Trastear y estudiar! Seguro que te sale muy bien!!

      Eliminar
  2. Chulísimoo! Cuando tenga un rato me instalo el mío! Muchas gracias May!!!

    ResponderEliminar
  3. Sí,sí, eres la mejor!!!! No puede estar explicado mejor!!! Me dan unas ganas locas de diseñar el mío!!! Mil gracias por tus tutoriales y cuidate mucho!!!

    ResponderEliminar
  4. Me acabas de dejar muerta!!! y es que a mi todo esto de HTML me suena a chino mandarino jejejeje
    Muchas gracias por el tutorial por que la verdad que llevo tiempo queriendo poner un buscador en el blog pero nunca vea uno acorde al diseño de mi blog y pues bueno... ahora puedo hacerme uno personalizado!!!! Gracias!

    Besines.

    Alba, Niña Bonita Accesorios

    ResponderEliminar
    Respuestas
    1. Ya será para menos!! Si sigues los pasos seguro que te sale, es fácil, de verdad, pese a que parezca un poquito lioso!!

      Eliminar
  5. Imposible currárselo más, tal cual :)

    ResponderEliminar
  6. ufff, qué miedo...habrá que probar...Lo de ir al cine ¿porqué les gusta tanto a estos hombres la jungla de cristal????

    ResponderEliminar
    Respuestas
    1. Miedo ninguno!!! miedo a quedarme dormida en el cine!!

      Eliminar
  7. Wow!! muy chulo :) ya volveré aquí dentro de nada a repasarme y releerme los codigos pues de esto no tengo ni idea... aunque parece fácil :) Ya te avisare si pongo el buscador personalizado en mi blog :) besos,
    celia

    ResponderEliminar
  8. hola!!! me encantan tus tutoriales!!!!!! eres una pasada!!!
    tengo una pregunta: estoy mirando de hacerme un blog, y estoy creandolo, el tema es que no sé donde tengo que meterme para poder llegar a estos textos de html para poder personalizar el buscador.
    si le doy al gadget del buscador me pone uno por defecto, pero no sé donde me tengo que meter para poderlo modificar
    ¿no sé si me he explicado?
    saludos!!!!1

    y un milllon de gracias!

    loli

    ResponderEliminar
    Respuestas
    1. Gracias!! Para poner este Gadget no tienes que añadir el gadget de buscado, tienes que añadir el de HTLM JAVA... Ahí es donde tienes que pegar el primer código y donde harás las modificaciones para cambiar el color y demás!
      Un beso y un millón de de nadas!

      Eliminar
  9. Ay May...que ya me he liado jajaja creo que lo voy a dejar guapetona snif snif

    ResponderEliminar
    Respuestas
    1. Inténtalo otra vez!! Seguro que te sale

      Eliminar
  10. Madre mia! menos mal que tu cuerpo no te hace mucho caso ultimamente que si no...

    IKER esta entrada se merece que no tortures a May yendo a ver La Jungla de Cristal (que está bien pero para otro fin de semana, hombre que es el fin de semana después del día más romántico del año) y en vez de eso, te la lleves a comer un riquísimo tiramisu!

    Un besote y como siempre, un tutorial de 10!!

    ResponderEliminar
  11. Hola May!
    Muchas gracias x el tuto.
    Por cierto, Iker creo q el plan perfecto para San Valentín sería ir a ver una peli (q no sea la Jungla de Cristal...) y después ir a comer tiramisú. Sí, sí, lo q has leido, las dos cosas!! :)
    Kissitos!!

    ResponderEliminar
  12. ¡Yo ya lo he hecho! Lo has explicado genial porque ha sido muy fácil.
    ¡Muchas gracias! Lo comparto en Twitter.
    Besos.

    ResponderEliminar
  13. Uy, yo no tengo botoncito de estos... y me has metido gana de ponerme uno! Jajajaja, aunque soy un poco cafre, y con todas las indicaciones que has dado, me pierdo fijo!! Jajajaja.

    Un besín!

    ResponderEliminar
    Respuestas
    1. que no!!!!! Me juego algo a que te sale!! :) Qué quieres perder!!!?

      Eliminar
  14. Hola!!!!
    Muchas gracias tu blog es de mucha ayuda gracias por todas tus ideas ya lo he hecho
    y quedo de lugo

    ResponderEliminar
  15. Нave yоu evег thought about adding a littlе bіt more than juѕt yοur aгticles?
    I mean, what you say is valuаble anԁ eνerything.

    But imagine if yοu aԁded some great pictures or
    viԁeο clips to givе уоur posts more, "pop"!

    Youг сontеnt is excellent but ωith pics anԁ videos,
    this site coulԁ undeniablу be οne of the moѕt
    benefіciаl іn its field. Аwesome blοg!



    Also visit my web-sitе; http://puregreencoffeeextract.us
    Also see my page :: http://puregreencoffeeextract.us

    ResponderEliminar
  16. Me ha venido de perlas tu buscador!! se me había escacharrado el mío, que era el básico de blogger, y de paso lo he personalizado un poco que el de blogger es muy rancio.

    Gracias por compartirlo! y enhorabuena por el blog, me ha gustado mucho, lo visitaré más veces :)
    Saludos!

    ResponderEliminar
  17. Gracias por el tutorial, me ha encantado ^o^

    Saludos
    Mika May
    .

    ResponderEliminar
  18. esto es genial! te lo agradesco un monton!!
    besos

    ResponderEliminar
  19. se mira hermoso en mi pagina, muchas gracias, soy programador y te digo que me la has puesto facil con todo estos codigos, jajaja muchas gracias, y mas gracias.

    ResponderEliminar
    Respuestas
    1. No sabes cuánto agradezco este tipo de comentarios!!!!

      Eliminar
  20. Me acabo de hacer un buscador que te cagas!!!! jajajaja aunque el fondo pretendia que fuese papel kraft y no se acaba de apreciar, no problem, lo cambiaré en un pis pas!!! jajaja Gracias por tus lecciones... la vida es mas fácil con Creative Mindly... si te apetece pasar a verlo, seras bienvenida!!! Mi blog se llama La Craftábata, te dejo el link...

    http://lalacraftabata.blogspot.com

    Gracias gracias y gracias!!!! Por cierto, es muy probable que veas algunos ajustes que he realizado bajo tus directrices... eres una máquinaaaaaaaaaaaaa!!!!!!!!!! Nos leemos!!

    ResponderEliminar
  21. Genial!! Vaya entrada más currada, super fácil de seguir. Se me ha quedado precioso el buscador. El tema de la URL lo dejo para otro rato.

    Deseando leer más tutoriales tuyos. ♥.♥

    ResponderEliminar
  22. Por cierto te llevo a mi tablón de Pinterest_ Recursos blog.

    Esto lo tiene que saber más gente...

    ResponderEliminar
  23. Una sola palabra, EXCELENTE, gracias por tanto!

    ResponderEliminar
  24. ¡Gracias! Me ha sido de gran ayuda :-)

    ResponderEliminar
  25. graxias! me ayudo mucho esto! necesitaba un buscador ver agua y con este tu me ayudaste mucho te lo agradesco infinitamente! Bless u god!^^

    ResponderEliminar
  26. Muchas gracias me encanto el tutorial y esta super bien explicado :)

    ResponderEliminar
  27. Me encantan tus tutoriales y diseños, preciosos y muy útiles, mil gracias ♥

    ResponderEliminar
  28. Algo estoy haciendo mal porque no me sale el fondo de imagen que yo quiero. Puede que sea el tamaño?Que tamaño debe tener la imagen?La he hecho con photoshop en png, en anchura 80pixeles y altura 42pixeles. La he subido a tynipic y he cogido el último enlace dónde pone direct link for layouts y la he añadido dónde tu dices en el tutorial. Ahora no podras ver el blog porque lo tengo bloqueado por los cambios que llevo haciendo hace dias. Gracias por el tutorial me ha sido muy útil para tener un buscador bonito! :)

    ResponderEliminar
    Respuestas
    1. Hola!! has borrado -color?? Tiene que poner solo background: después url (URL DE LA IMAGEN); Mira a ver, sino vuelve a preguntarme!

      Eliminar
  29. Buenos días! Gracias por tu pronta respuesta. Si si lo hice tal cuál siguiendo los pasos que dijiste en el tutorial y se me pone cómo una especie de gris transparente, que ayer se me olvidó decir esto. Porque el tamaño es correcto? Gracias!

    ResponderEliminar
  30. Otra pregunta: Se puede personalizar el traductor igual que he hecho con el buscador?Cómo se hace?Gracias por tu ayuda!! :)

    ResponderEliminar
  31. Enhorabuena por el tutorial. Claro y muy bien explicado. Voy a ponerme ahora mismo con ello. Thanks!

    ResponderEliminar
  32. Como te lo curras, chiquilla!!!! Bueno, perdona, tan alucinada me tienes que una pierde hasta la educación. Hola May, me llamo Mami y quería darte las gracias por estas magníficas entradas, tutoriales, ideas, recursos, tu buen gusto, el salero que aportas, en fin me gusta todo. Tengo que decir que he aprendido en dos días de paseo por tu blog más a mejorar el mío que los siete meses que llevo en antena. Este del buscador aún no lo he intentado pero ya he aplicado varios de los tutoriales que nos has enseñado y preparado con tanto mimo y esfuerzo, créeme que lo valoro por encima de todas tus enseñanzas, se lo que es preparar una entrada normalita pues me imagino lo que tiene que ser hacer una de las tuyas!!! Quería también comentarte algo que espero no te moleste, bicheando en uno de los programas para generar fondos que nos diste, el de bgmaker, empecé a probar fondos, no sabes cuantos hice, de cuadritos, de rayitas, de corazones, en fin muchos, y al final de todos el que más me gustaba y cuajaba más con mi blog era uno casi calco del tuyo. La verdad que me encanta como queda pero si te parece mal pues lo cambio y listo. Bueno, May, ya ves que yo también me enrollo como una persiana, sé que estás de vacaciones, así que espero disfrutes y vengas bien cargadita de nuevos proyectos!!! Por cierto, la temática central de mi blog es el patchwork, se llama Cose y Calla , por si tienes curiosidad, me encantaría saber tu opinión sobre como lo ves. Gracias de nuevo, besos y hasta pronto! Mami.

    ResponderEliminar
  33. Que buena entrada, realmente me ha servido de mucho, gracias por compartirla, me he quedado con las páginas que has recomendado y tus sugerencias. Por cierto, que buen blog tienes, felicitaciones. Saludos cordiales.

    ResponderEliminar
  34. Mil gracias por tu tutorial, lo explicas fenomenal y no sabes cuánto ayuda.

    ResponderEliminar
  35. Genial. Ya he personalizado el mio.
    Muchas gracias!!

    ResponderEliminar
  36. Felicitaciones! Que bien explicas, este es mi blog y con tu ayuda lo tengo asi de chulo jejeje
    http://proyectopastelito.blogspot.com/
    mil gracias!

    ResponderEliminar
  37. Gracias, quedó muy bien!

    ResponderEliminar
  38. Iker, lleva a May a hacer algo romántico, no a ver la peli de la Jungla de cristal!!

    ResponderEliminar
  39. hola una pregunta, como hago para que funcione en mi blog esta creado en wordpress cuando busco un post en mi web dice que no como le hago por favor

    ResponderEliminar
  40. De lujo, el mejor buscador personalizado que he podido encontrar, muchas gracias por tremendo aporte. Saludos

    ResponderEliminar
  41. Ya hemos cambiado el nuestro. Como siempre muchas gracias por tu generosidad

    ResponderEliminar
  42. Cuando puse el buscador, se queda congelado, es como si fuese una imagen, ¿podrías ayudarme? Esta muy padre tu tutorial

    ResponderEliminar
    Respuestas
    1. ay que tonta, estaba en modo "vista previa" jajaja ups! Gracias Gracias se ve hermoso

      Eliminar
  43. Espectacular, como siempre. Ahora voy a ir trasteando hasta que de con el color que mejor me va. Mil gracias, eres una crack!!!!

    Besets

    ResponderEliminar
  44. Hola May!!! he tardado pero por fin tengo mi buscador personalizado en el blog :D
    Todo perfecto y super fácil ^^ gracias a tus explicaciones!!!! solo hay una cosita que me esta dando guerra, como no!!!!! jejejeje, pero de verdad gracias por explicar todos los cambios tan bien.
    Besines

    Alba, Niña Bonita Accesorios

    ResponderEliminar
  45. Hola, agradesco por creaciòn de este hermoso buscador interno. La verdad es tan muy excelente. Quisiera preguntar si en ello puedo agregar una microfono es decir, hacer busquedas por voz al estilo google cuando se denota un microfono. He estado buscando informaciòn pero no se como hacerlo. Me podria ayudar.

    ResponderEliminar
  46. Perfecto el Aporte. Gracias.no olviden darse 1 Vuelta por www.netflix5.com mejor pagina de peliculas Gratis.

    ResponderEliminar
  47. Hola May,
    Desde hace poco, me he suscrito a tu blog y además estás en una de mis blog list. Agradecerte toda tu ayuda tan altruista y darte la enhorabuena por todos estos conocimientos.

    Muchas gracias, me ayudas mucho a mejorar mi blog.

    Un beso,
    Anne.

    ResponderEliminar
  48. Muchas gracias, buscaba algo así y no había manera de encontrarlo tan bien explicado

    ResponderEliminar
  49. Más completo imposible, y lo que interesa, que es que el buscador sea efectivo y este lo es. Un saludo y muchas gracias por el tuto.

    ResponderEliminar
  50. Debo ser (seguro que lo soy) muy torpe, porque lo pego en el cuadro de diseño en HTML tal cual y me dice que la primera línea está mal. Y de ahí no pasamos...
    ¿Alguna solución?

    ResponderEliminar
  51. Hola... genial este tutorial... muy hermoso... quisiera preguntar.. si quisiera utilizar esta mis caja de búsqueda en la caja de suscripciones del feed... como se haría??? muchas gracias!!!

    ResponderEliminar
  52. Genial!! estaba buscando un código para el buscador que no fuese muy complicado y este tuto me ha ido genial.

    Gracias^^

    ResponderEliminar
  53. Una consulta, ya me funciona el buscador gracias
    Lo que yo quiero hacer es qu me busque por fecha quizas?
    Ya que en mi blog pongo varios titulos pero por versiones
    por ejemplo: Aplicacion v1 , luego otro dia pongo Aplicacion v2 y asi muchas mas en fechas distintas
    Cuando pongo en el buscado me aparecen todos pero en desorden: Aplicacion v5 , luego Aplicacionv2 y asi.
    Lo mejor seria que sea por fecha, del mas actual, hay alguna forma de ponerlo asi por fecha del mas actual q salga primero?

    ResponderEliminar
    Respuestas
    1. Juan... ya lo siento pero no te puedo ayudar... mal que me pese no lo sé todo... Sorry

      Eliminar
  54. Entre este tutorial y el otro que he encontrado por tu blog ya he conseguido poner el buscador como quería =) Ojalá tuviera más tiempo para trastear más los diseños. Me ha gustado mucho la opción de poner una imagen como fondo del botón

    ResponderEliminar
  55. ¡Me ha venido genial este post May! Me encanta tu blog y lo sigo desde hace un tiempo, así que quería darte las gracias por compartir con nosotros todas estas maravillas ;D

    un beso

    www.myvintagememoirs.com

    ResponderEliminar
  56. interesante pive http://sumarganancias.blogspot.com.es/

    ResponderEliminar
  57. ¡Muchas gracias! Lo explicas todo que da gusto.
    Un saludo,
    MISoRu.
    http://misoruartesanal.blogspot.com.es/

    ResponderEliminar
  58. Perdona May, me podrías decir cual es el código de la fuente "Gruppo"? Gracias

    ResponderEliminar
  59. Fantásticas explicaciones! Me he atrevido a trastear un poquito más el código para cambiar la altura y ha quedado justo como quería.
    Mil gracias por compartir y hacerlo tan fácil.
    Marta

    ResponderEliminar
  60. Oh son geniales tus tutoriales me re ayudaron! Pero quería preguntarte algo al buscador lo puse arriba de la entrada pero me aparece en la izquierda y quiero que me aparezca a la derecha como lo cambio con el html?

    ResponderEliminar
  61. hola¡¡ =)

    Bueno, me encanta este post, y me ha sido muy útil¡¡ Gracias¡¡

    Además tengo que decir que en vez de cambiar la fuente lo que he hecho en mi buscador es escribir en mi imagen "buscar" a mi manera, como he querido, y en el codigo del texto no he puesto nada.

    Es otra idea , no?

    Aquí podréis ver cómo queda ;) un saludito

    http://eldiariointimodemilocurainfinita.blogspot.com.es/

    ResponderEliminar
  62. Hola May,

    muchísimas gracias por estos post. Yo estoy empezando...y no veas como ayudan todos tus tutoriales.

    El de este caso, el tema es que yo he hecho más estrecha la caja de búsqueda, y también he disminuido el tamaño de la letra, tanto del mensaje de búsqueda como del texto "buscar", y he ido un poco a modo...prueba y fallo...pero ahora se me quedan las letras "un poco abajo"...y no sé como solucionarlo...es decir que no se me quedan centradas hacia arriba, sino en la parte de abajo...no sé si me explico...

    Si te puedes pasar por mi blog (http://www.blogisthenewmust.com) verás de lo que te hablo...



    Por otro lado, como sugerencia si pudieses hacer lo mismo con la caja de "sígueme por mail..". Ya sé que bastante trabajo te damos, pero podías hacer un post en el que te extendieses en la explicación como en este caso y luego en el mismo post, poner el código HTML sin explicar para personalizar el resto de gadgets que usamos la mayoría. El tema es que todos queremos que nuestros "botones" tengan cierta armonía, y por ejemplo en mi caso me gustaría que tanto el gadget de "sígueme por mail" como el de "buscar" tengan el mismo estilo. Con lo que he leído aquí, he intentado que se parezcan pero no son iguales.



    Perdona por el tocho y gracias por tu estupendo trabajo.

    ResponderEliminar
  63. Muchas gracias por compartir este magnifico post. Yo tenia un buscador, el que ofrece blogger, pero falla mucho y quería buscar otro. Tu post me parece increíble... muy completo y fácil de seguir, pero tengo un problema y es que cuando intento poner me sale error 400... no hay forma de arregla resto???
    Saluditossssssssss

    ResponderEliminar
  64. Como haces para que quede mas pequeña o en todo caso para que queden las letras de la caja mas pequeñas, yo lo hice todo y quedo bien, pero creo que esto no puede modficarse o si??

    ResponderEliminar
  65. Muchas gracias May. Me sirvió mucho. Pásate por mi blog si no estás en el cine o tomando un tiramisú ;)
    www.cot-cut-cut.blogspot.com

    Gracias

    ResponderEliminar
  66. ¡Hola! Sirvió mucho... Gracias^^
    Felices Fiestas ;)

    ResponderEliminar
  67. Genial y que bien explicado y detallado!! Mil gracias por compartir!
    Slds!!
    Angélica

    ResponderEliminar
  68. Gracias por el aporte, buscaba algo asi, sencillo y funcional

    ResponderEliminar
  69. ¡OMG NO SÉ COMO AGRADECERTE!

    Tienes razón, leyendo con detenimiento TODO es más fácil. ¡Me salió a la primera! Estoy suscrita desde hace bastante, pero cada vez más me sorprendes con tus tutos. ¡Un beso, y mil gracias!

    ResponderEliminar
  70. May, debo decirte que estoy fascinada con tu blog, hazle un favor al mundo (y a mí) y no dejes de postear tutoriales.

    ResponderEliminar
  71. Hecho. Soy fan de tu blog. Me encanta como lo explicas. Gracias a ti me está quedando un blog que, al menos a mi, cada día me gusta mas

    ResponderEliminar
  72. Me ha encantado, muchas gracias. Lo has explicado de forma muy clara y has puesto mucha información. Me ha sido mu útil. un beso dede https://mispalabrasentrelazadas.blogspot.com.es

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!