Cómo poner un buscador personalizado

5/12/15
¡Hola,hola! ¿Qué tal la semana? La mía de exámenes, je, y no ha hecho más que empezar. 
Pero al menos... ¡dentro de tres días es mi cumple! El 8 de diciembre :) 
Voy a traeros algunos freebies para éste mes tan festivo. Pero vamos a lo que vamos:

Hoy se me ha ocurrido un mini-tutorial. Últimamente estoy publicando más, espero que os sean de ayuda.  Es sencillísimo.
Yo no sé a ti, pero a mí el buscador predeterminado de blogger no me gusta. No sólo porque es feo, que lo es. Es que no busca, a mí no me funciona. Así que he decidido cambiarlo. 


ANTES:



DESPUÉS:




Para conseguir el código original, entré en ésta página, pero bueno, lo que es el buscador me parecía un poco... blej. Pero si a ti te gusta, puedes coger el código desde ahí. 
Si te gusta mi forma, ¡Sigue leyendo! 

Aquí hay uno icono de Font Awesome, así que no olvidemos que instalar F.A. y personalizar los iconos. En el tutorial está todo. A continuación, te dejo el código que yo misma he modificado.




EL CÓDIGO DEL BUSCADOR 

Pega Diseño> Añadir gadget> Html/javascript. Y pega el siguiente código:


<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px dashed #F2CDCD; /*Color de borde*/
    -webkit-border-radius: 0px;    -moz-border-radius: 0px;    border-radius: 0px; /*Pon un valor si quieres tener los bordes redondeados, cc*/    background-color: #fff; /*Color de fondo*/
    overflow: hidden;
}
#search-text {
    font-size: 14px; /*Tamaño del texto en la caja*/
    color: #ddd; /*color del texto dentro de la caja*/
    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: 1px solid #F2CDCD; /*borde del botón*/
    background-color: #F2CDCD; /*Fondo del botón*/
    -webkit-border-radius: 0px 0px 0px 0px;    -moz-border-radius: 0px 0px 0px 0px;    border-radius: 0px 0px 0px 0px; /*Si quieres poner bordes redondeados, pon el valor que quieras*/    cursor: pointer;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='PALABRA + ENTER' type='text'/>
    <button id='search-button' type='submit'><span><i class="fa fa-search"></i>
</span></button>
  </form>
</div>



CÓMO PERSONALIZAR EL ICONO DEL BUSCADOR

Vas a plantilla> Personalizar> Añadir CSS


.fa-search{
color: #ffffff; /*Color del icono*/
 background-color: transparent; /*Color del fondo*/
 border: 0px solid #cccccc; /*color del borde*/
font-size: 15px; /*Tamaño del icono*/
 }
.fa-search:hover{ /*Formato al pasar el ratón por encima*/
color: #999999; /*Color del icono*/
background: transparent; /*Fondo del icono*/
border: 0px solid #ffffff; /*Borde*/
font-size: 15px; /*Tamaño del icono*/
}



Y ya está. ¿Qué os ha parecido? ¿Fácil? ¿Útil? ¡Déjamelo en los comentarios!

¡Mua!

6 comentarios

  1. ¡Hola! La verdad es que queda mucho más mono este que el que viene. A ver si me animo un día y lo cambio.

    Un beso

    ResponderEliminar
    Respuestas
    1. Eso espero! Además es súper sencilo!
      Muaaa

      Eliminar
  2. Hola! Muy buen tutorial!! Lo cambiaré en mi blog porque el que tengo me parece muy soso, jejeje.
    Besos!

    ResponderEliminar
    Respuestas
    1. Además, a mí el de blogger me funciona mal, no sé a ti, jejej.
      Me alegra que te fuera de ayuda!
      Un beso!

      Eliminar
  3. ¡Hola guapa! Muchas gracias por el tutorial, me encanta el estilo que le has dado al buscador *-* y por cierto! Al final te has quitado el sidebar eh? jiji. Cada día me encanta más tu diseño <3

    ResponderEliminar
    Respuestas
    1. Gracias!
      Uf... qué quieres que te diga. Quiero hacer tantos cambios, tantos, que no sé por dónde empezar. jajajaja
      No sé si poner el sidebar o no. Aún me lo sigo pensando...
      La otra plantilla me gustaba mucho, pero me daba problemas con la plantilla móvil. Así que a ver qué hago.
      Al final me dedico a diseñar plantillas y venderlas jajajajaja

      Eliminar