sábado, 3 de mayo de 2008

Como agregar un buscador interno a tu blog

Muchos de vosotros os habréis vuelto loco buscando algo en diversas entradas de diversos blog, en busca del artículo que habías visto hace tiempo pero que no os acordáis en donde lo dejasteis. La solución, un buscador para tu blog. Facilita a tus lectores la búsqueda de contenido directo dentro de tu página sin necesidad de andar mirando en la lista interminable de archivos o de etiquetas. Para ello os propondremos tres tipos de buscadores, es decir con distintos motores de búsqueda: Uno basado en el ya famoso Google, otro de Blogger que al fin y al cabo son los mismos pero con distinta interfaz, y otro basado en mostrarte los resultados directamente dentro de tu propia plantilla. Para mí este último me gusta mucho dado que no salimos del entorno de nuestra página.

En primer lugar si lo vais a colocar en la barra lateral debéis añadir un artilugio (HTML/Javascript) para que pueda interpretar el código, o por otro lado si preferís ubicarlo en alguna otro lugar del blog, solo debéis acceder a diseño/edición HTML y encontrar la categoría correspondiente, que puede ser en la cabecera (header), en el cuerpo (body) o en el pie de página (footer).

Los códigos son los siguientes, empezando por el que realiza la búsqueda a través de la interfaz clásica de Google.
<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<input maxlength="255" value="" name="q" size="15" type="text"/>
<input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="(AQUÍ DEBEREIS INCLUIR LA DIRECCIÓN COMPLETA DE VUESTRA PÁGINA)" name="domains" type="hidden"/><br/><input value="" name="sitesearch" type="radio"/> en Web <input checked value="(AQUI TAMBIÉN)" name="sitesearch" type="radio"/> en Blog <br/></font></form>

Este otro nos mostrará los resultados en una bonita y sencilla interfaz de Blogger.
<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" name="as_q" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="(AQUÍ DEBEREIS INCLUIR LA DIRECCIÓN COMPLETA DE VUESTRA PÁGINA)" name="bl_url" type="hidden"/>
<input id="b-searchbtn" alt="Search This Blog" value="Buscar" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='(AQUÍ TAMBIÉN)'" type="submit"/></form>

Y por último el interno por decirlo de alguna manera, dado que nos hará la búsqueda en nuestro propio blog.
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Ir!" type="submit"/></form>

En fin, en la práctica todos hacen lo mismos pero si queréis ventajas y desventajas, pues ahí van. Con el buscador de Google tenemos la ventaja que no solo podemos buscar algo dentro de nuestro blog sino que también nos facilita la opción para hacerlo en toda la red. Sin embargo nos saca totalmente fuera del entorno de nuestra página y puedo resultar algo confuso.

En segundo lugar tenemos el buscador de Blogger, este en cambio tiene una interfaz más conocida dado que se sustenta en nuestro sistema de alojamiento del blog. Otra ventaja es que además de búsquedas internas podemos buscar contenidos en los blogs de los directorios de Blogger, muy interesante por cierto.

Y por ultimo nos queda el que nos muestra directamente los resultado en nuestro blog, cosa que para mi ya es una ventaja sin embargo esa es su única opción de búsqueda por lo cual esta limitación se convierte en su desventaja.

Podréis ver una demostración en el enlace final, y como siempre digo espero que os haya servido de ayuda y también como siempre digo, no seáis tímidos que si tenéis dudas o problemas comentadlo.

Enlace: Demo

5 Comentarios:

Anónimo dijo...

Muy bueno este post, lo explicas excelente!

Mario dijo...

Me alegra mucho que te haya ayudado, si quieres puedes pasarte por el post para "personalizar el buscador con CSS" donde también te puede ser de utilidad si quieres cambiar el aspecto del buscador.

Un saludo ;)

Anónimo dijo...

oie amigo y como puedo hacer que aparesca la barra de buscadora debajo del logo de google que apareceen su pagina web??

Mario dijo...

Hola JuanSCho, si no te he entendido mal creo que a lo que te refieres es a incrustar la imagen del logotipo de google encima de la barra del buscador de tu blog. Si es así, lo que debes hacer es una ves implementado el codigo de uno de los tres buscadores que dispones arriba, justo encima del mismo debes incluir la siguiente línea:

<img style="margin:0px 0px 0px 0px;" src="DIRECCION DEL LOGOTIPO DE GOOGLE" class="cuadro"/>

Y luego mediante el atributo margin puedes ir configurando la posición sabiendo que el 1º valor corresponde al margen superior, el 2º al derecho, el 3º al inferior y el 4º al izquierdo.

Espero haberte respondido a tu duda aunque realmente no estaba muy seguro a lo que querias referirte, si ves que no te he resuelto nada comentalo sin problemas.

Un saludo ;)

Unknown dijo...

muchisimas gracias! la verdad que me volví loco intentando encontrar un buscador interno para mi blog y vos me has dado 3 posibilidades (usé la última, la que recomendás) y anda 10 puntos!!!!

Publicar un comentario