Blogger: 3 formas de poner un buscador en tu blog

Si quieres añadir una caja de búsqueda a tu blog en blogger, al terminar de leer este tutorial habrás aprendido 3 formas de hacerlo. Podrás ver las diferencias que hay entre todos los tipo de búsqueda, para que puedas elegir la que más te guste, además veremos lo fácil que es cambiarle el aspecto.

A veces, aunque tengamos muy organizado nuestro blog, con etiquetas, opciones de menú, etc. El usuario no es capaz de encontrar lo que necesita. Cuando el número de entradas de tu blog comienza a crecer, cada vez le será más difícil dar con el contenido correcto.

Un recuadro de búsqueda, en una zona visible, ayudará a que el usuario intente encontrar la solución a su problema en tu blog, si no lo tuvieses, seguramente ese mismo usuario terminaría utilizando la búsqueda de Google u otro buscador, con lo que estaríamos perdiendo una visita,  posiblemente dándosela a la competencia.

Sin más preámbulo, vamos a exprimir todas las posibilidades de búsqueda de las que disponemos en Blogger. Estoy convencido que te costará decidirte por alguna de ellas.

1. Gadget "Cuadro de búsqueda"

Vamos a empezar por la más fácil de incluir en nuestro blog: Cuadro de búsqueda. Éste es el nombre tan original que le han dado los chicos de Blogger, es la búsqueda que nos dan por defecto, así que veamos que tal está.

Pasos para incluir el cuadro de búsqueda

1. Blogger > Diseño > Añadir un gadget (en la posición que desees, dentro del diseño)
2. De la lista de gadgets, seleccionamos Cuadro de búsqueda
   
3. Le ponemos un título a nuestro gadget
4. De la sección Pestañas, marcamos las opciones que nos interesen. Lo normal es marcar sólo "Este blog", ya que el resto de opciones nos permite buscar elementos externos
5. Guarda el gadget y visualiza tu blog

Perfecto, ya tenemos nuestro cuadro de búsqueda funcionando.

Como hemos visto, incluir este gadget es inmediato, nos ofrece bastantes posibilidades, pero tiene un gran inconveniente: falla más que una escopeta de feria.

El mayor problema, es que usa código basado en javascript y estructurado en capas, si los chicos de Blogger "pulsan" el botón incorrecto, te quedas sin buscador. De hecho, ahora mismo la comunidad se está quejando porque no les funciona... quién sabe, quizás mañana esté resuelto, pero visto lo visto, yo no me arriesgaría. 

Las búsquedas de este gadget se hacen sobre el buscador de blogs de Google. Por tanto, hasta que la gran G no indexe nuestras entradas, no hay nada que hacer. Si bien es cierto, que lo suele hacer muy rápido.

2. Búsqueda interna de Blogger

Lo que haremos en este caso, es incluir un cuadro de búsqueda personalizado, que hace una petición a Blogger para que haga la búsqueda por nosotros. 

Pasos para incluir la búsqueda interna de Blogger

1. Blogger > Diseño > Añadir un gadget (en la posición que desees, dentro del diseño)
2. De la lista de gadgets, seleccionamos HTML/Javascript
3. Ponle un título adecuado, si quieres, y copia este código en el contenido:
   

   <form action="search/" id="ba-cuadrobusqueda" method="get">
     <input id="ba-cadenabusqueda" name="q" />
     <input id="ba-enviar" type="submit" value="Buscar" />
   </form>
   

4. Guarda el gadget y visualiza el blog

Una de las mayores ventajas de este cuadro de búsqueda, es lo fácil que es de añadir y personalizar. En el ejemplo hemos utilizado el código en su mínima expresión, pero luego veremos lo fácil que es de personalizar mediante CSS.

Quizás una de sus mayores ventajas es que no hace uso de ningún motor de búsqueda externo, por lo que no tenemos que esperar a que se indexe.

Cuando pulsamos sobre una etiqueta en Blogger, realmente estamos haciendo una búsqueda. El proceso que hemos empleado, utiliza la misma base para buscar el texto en todas las entradas.

Cuadro de búsqueda naranja

Veamos un ejemplo de personalización utilizando tan solo CSS. Para incluirlo, sigue los pasos explicados anteriormente y en el paso 3 sustituye el código por este otro.

Éste es el aspecto del cuadro de búsqueda en funcionamiento:

<style>
#ba-cuadrobusq .ba-textobusq {
border: 1px solid #DDD;
box-sizing: border-box;
color: black;
font-family: 'Lora', serif;
font-size: 14px;
padding:9px;
width: 220px;
transition: all 0.3s ease-in-out; 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
}
#ba-cuadrobusq .ba-textobusq:hover {
box-shadow:inset 1px 1px 8px gainsboro;
}
#ba-cuadrobusq .ba-textobusq:focus {
background-image: -webkit-linear-gradient(white,white); 
background-image: -moz-linear-gradient(white,white); 
background-image: -ms-linear-gradient(white,white);
background-image: -o-linear-gradient(white,white); 
background-color:white; 
outline:1px solid #E8550B; 
color:black; 
font-style:normal; 
box-shadow:inset 1px 1px 8px gainsboro; 
border:1px solid #E8550B; 
} 
#ba-cuadrobusq .ba-enviar {
background:#E8550B;
border: 1px solid #E3E3D9;
color: white;
cursor: pointer;
font-family: 'Droid Sans', sans-serif !important;
color: #fff;
cursor: pointer;
line-height: 19px;
padding: 8px 10px;
text-decoration: none;
}
#ba-cuadrobusq .ba-enviar:hover {
background:#e8320f;
}
</style>
<form action="search/" id="ba-cuadrobusq">
   <input class="ba-textobusq" name="q" />
  <input class="ba-enviar" type="submit" value="Buscar" />
</form>

3. Búsqueda personalizada de Google

Cuando hablamos de buscadores, siempre viene Google al rescate y esta vez no iba a ser menos. Si bien es cierto que el anterior sistema de búsqueda no está nada mal, éste tiene algunas peculiaridades muy atractivas, pasen y vean.

En este caso no estamos ante un gadget de Blogger, sino que vamos a utilizar una herramienta facilitada por Google para generar una búsqueda personaliza, que luego incluiremos como código HTML.

Las posibilidades que nos ofrece la herramienta de Google son prácticamente infinitas, necesitaríamos otro artículo para describir cada una de ellas. Lo que haremos es incluir un ejemplo de búsqueda, explicando las funcionalidades más importantes.

Paso 1: Obtenemos el código del motor de búsqueda

1. Accedemos al motor de búsqueda personalizado de Google
2. Pulsamos sobre crear un motor de búsqueda personalizado
   
3. En sitios en los que buscar, pon la dirección de tu blog 
4. En idioma selecciona español, o el que gustes
5. Pulsa sobre el botón crear
6. Pulsa sobre el botón obtener código
   
   

   Si quieres ver el aspecto de tu motor de búsqueda, puedes pulsar sobre el botón "URL pública", si no te gusta el aspecto actual, puedes modificarlo en el botón "Panel de control". 

7. Obtendrás código HTML parecido a este:
   

   <script>
     (function() {
       var cx = '011498994498619844799:t4vzeynckjs';
       var gcse = document.createElement('script');
       gcse.type = 'text/javascript';
       gcse.async = true;
       gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
           '//www.google.com/cse/cse.js?cx=' + cx;
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(gcse, s);
     })();
   </script>
   <gcse:search></gcse:search>
   

Paso 2: Incluimos el código del motor de búsqueda en Blogger

1. Blogger > Diseño > Añadir un gadget (en la posición que desees, dentro del diseño)
2. De la lista de gadgets, seleccionamos HTML/Javascript
3. Ponle un título adecuado, si quieres, y copia el código generado en el paso anterior en el contenido
4. Guarda y visualiza tu blog

Este es el aspecto que tendrá el cuadro de búsqueda:

Ya tenemos funcionando la búsqueda personalizada de Google en nuestro blog. El diseño que viene por defecto, presenta los resultados de búsqueda en una ventana emergente, por lo que añadir el gadget ha resultado muy sencillo.

Si quieres modificar el comportamiento o el aspecto del motor de búsqueda, puedes curiosear por la ayuda que te proporciona Google. Si interesa este punto, coméntamelo y podemos preparar un artículo especial profundizando en el tema. A groso modo, decir que podemos presentar el cuadro de búsqueda en una zona de nuestro blog y los resultados en otra, además de poder modificar los colores de ambos.

Veamos algunas ventajas de este método:

• Tenemos la potencia del motor de búsqueda de Google
• Podemos personalizarlo sin modificar el código fuente
• Podemos incluir AdSense, obteniendo beneficios de los anuncios
• Incluye búsqueda de imágenes
• Los resultados de búsqueda pueden incluir a más de un sitio

Y algunas de sus desventajas:

• Nuestras entradas deben estar indexadas en Google, para que se muestren
• Aparece marca de agua y publicidad de Google

Al cuadro de búsqueda personalizado de Google, también le podemos cambiar su aspecto mediante CSS, tal como hicimos con el anterior. Podríamos utilizar, por ejemplo, el cuadro de búsqueda naranja del punto 2 y modificar tan solo la URL hacia la que apunta el action del form. En todo caso, si no dispones de los conocimientos necesarios, con la herramienta de personalización de Google podrás elegir entre varios diseños y personalizarlos.

Conclusión

Como puedes observar, hay muchas formas de poner un buscador en tu blog, elegir la mejor depende del tipo de blog que tengas y de tus gustos.  El objetivo de este artículo, es que veas las posibilidades que tienes y que aprendas a modificar y adaptar tu mismo los cuadros de búsqueda.

Espero que te haya resultado útil lo aquí expuesto. Como sabes, este blog lo comencé hace muy poco, agradezco cualquier crítica o comentario que desees hacer. Por otra parte, si te ha gustado, te estaría muy agradecido de que lo compartas con los botones sociales de la parte superior. Se que soy un pesado, pero inicialmente todo esto ayuda mucho :-)

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)