Pon un buscador en tu blog para que las visitas no se marchen si no encuentran lo que buscan

1.6.16

buscador blogger

Si un lector entra en tu blog y a través del menú (supongo que tienes un menú en tu blog, no?) no encuentra lo que necesita… ¿cómo lo buscará?


¿Tienes un buscador en tu blog?

Exacto,  es muy probable que hasta ahora que no has leído la pregunta, no se te haya pasado por la cabeza de poner un buscador en tu blog.

No eres la única persona de la tierra a quien le ha pasado.

Hay muchos blogs que no tienen buscador, por la sencilla razón que quien escribe el blog nunca se le ha pasado por la cabeza que alguien lo pueda necesitar, porqué no encuentra algo en el blog!

¿Y qué pasa sino tienes buscador?

Te voy a poner un ejemplo muy muy real, porqué a mi me ha pasado más de 10 veces.

  1. Entras en un blog buscando un artículo en concreto
  2. Accedes al menú (si es que lo tiene)
  3. No consigues dar con el post que estás buscando.
  4. Te das cuenta de que no tiene buscador! 
  5. Tu búsqueda se ha terminado aquí, porqué no tienes otra manera de encontrar el post! 
  6. Como era de esperar, te vas del blog.

Lo ves claro, ¿verdad?

Si no ayudas a tus lectores a encontrar lo que buscan, se van a otro blog que les facilite más la vida.

Si no tienes un buscador...dedícale 10  minutos y añádelo ahora mismo!


Cómo poner el gadget del buscador

El gadget lo puedes poner donde tu quieras, pero te recomiendo que lo pongas en la barra lateral, un poco hacia arriba, para que todos los lectores lo tengan a la vista.

Con el código que hay a continuación tendrás este buscador en tu barra lateral



Después tienes que personalizarlo a tu gusto.


1. Entra en " Diseño".

buscador en blogger

2. Añade un gadget en la barra lateral donde quieras poner el buscador.

buscador blog blogger
3. Escoge un gadget de HTML

añadir buscador sidebar

4. Pega el código siguiente en el recuadro blanco.


   <div id='search-box'>
    <form action='/search' id='search-form' method='get' target='_top'>
      <input id='search-text' name='q' placeholder=' ' type='search'/>
      <button id='search-button' type='submit'><span>Buscar</span></button>
    </form>
  </div>



5. No olvides de guardar los cambios!

poner buscador sidebar


6. Guarda la disposición general en el apartado de diseño, arriba de todo a la derecha.

buscador barra lateral



Cómo personalizar el gadget del buscador

Ahora mismo si entras en tu blog, verás un buscador muy básico y sin personalizar, como este.

buscador blog adaptar


Está claro que ahora debes personalizar el buscador de Blogger a tu gusto.

Para hacerlo debes seguir los siguientes pasos:

1. Entra en "Plantilla" del menú lateral izquierdo.

personalizar buscador blog

2.  Pincha en "Personalizar"


colores buscador blog

3. Busca la opción "Avanzado" y dentro de ella "Añadir CSS".

tamaño busador blogger


4. Copia el siguiente código CSS en el recuadro blanco.


#search-box {
position: relative;
width: 100%;
margin: 0;
color: black !important;
}

#search-form {
height: 34px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #ffffff;
overflow: hidden;
}

#search-text {
font-size: 12px;
color: black;
width: 100%;
height:100%;
text-align: left;
border-width: 0;
background: transparent;
}

#search-box input[type="text"] {
width: 90%;
padding: 11px 0 12px 1em;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 36px;
width: 80px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ffffff;
text-align: center;
line-height: 35px;
border-width: 0;
background-color: #000000;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}


Aquí encontrarás las indicaciones para personalizar a tu gusto el gadget del buscador.

#search-box (hace referencia a todo el buscador)
  • width --> indica el ancho de todo el buscador dentro de la barra lateral (sidebar).

#search-form (hace referencia a la caja donde se escribirá)
  • height --> altura de la caja del buscador.
  • border --> borde alrededor de la caja de buscar. Primero hay el ancho del borde, el tipo de borde (solid, dotted, dashed) y el color del borde.
  • border-radius --> radio de las esquinas (para hacerlas redondas).
  • background-color --> color de fondo de la caja donde se escribirá. Con hexadecimal  o con el nombre.

#search-text (hace referencia al texto que los lectores escribirán dentro de la caja)
  • font-size --> tamaño del texto dentro de la caja.
  • color --> color del texto dentro de la caja. Con hexadecimal o con el nombre.
  • text-align --> alineación del texto dentro de la caja.

#search-button (hace referencia al botón donde pone Buscar)
  • height --> altura del botón (tiene que ser un poco más grande que el ancho de la caja).
  • width --> ancho del botón.
  • font-family --> tipografía del texto.
  • font-size --> tamaño del texto.
  • color --> color del texto. Con hexadecimal o con el nombre.
  • background-color --> color de fondo del botón. Con hexadecimal o con el nombre.
  • border-radius --> radio de los bordes. Es muy importante que los dos del medio coincidan con el border-radius del #search-form!


5. No te olvides de guardar los cambios! En caso contrario se perderá la personalización que has hecho del buscador.

guardar buscador blogger



Ejemplos de cómo personalizar el buscador en Blogger

Ten en cuenta que el buscador debe estar adaptado a los colores de tu blog, para que quede bien con el resto de elementos.

Aquí tienes unos cuantos ejemplos que podrás crear, sólo cambiando algunos de los parámetros del código anterior.


adaptar buscador blogger


personalizar buscador bloggerborde buscador blogger
borde buscador blogpersonalizar buscador sidebar





Estoy segura que a partir de ahora cualquiera que entre en tu blog buscando un post en concreto, lo podrá encontrar.

Anímate a crear tu super buscador personalizado!

¿Habías pensado nunca en tener un buscador? ¿Lo utilizas en otros blogs para buscar? ¿Te he convencido para que lo pongas en tu blog? Nos leemos en los comentarios!


Laura


¿Te ha servido lo que has leído?

Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)


¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.