Blogger: 3 formas de poner un buscador en tu blog

3 de diciembre de 2013
78 comentarios
Blogger: 3 formas de poner un buscador en el 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
    Blogger - Configurar 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
    CSE - Crear motor de búsqueda
  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
    CSE - Motor de búsqueda creado
    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:
cse - Cuadro de búsqueda en blogger

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

Gracias :-)

78 comentarios :

  1. Muchas gracias, llevaba varios meses esperando una respuesta para cambiarlo y hoy me he decidido por buscar una alternativa. Gracias por el post, escogí la segunda opción. La primera no me daba los resultados esperados.

    ResponderEliminar
  2. Hola Álvaro,

    Muy interesante tu blog. Me alegra mucho que te haya servido de ayuda este pequeño tutorial. Gracias por comentar ;)

    ResponderEliminar
  3. Muy útil tu entrada, me ha venido de perlas para el blog, ya que el buscador de blogger no funcionaba muy bien y necesitaba otras alternativas. Saludos.

    ResponderEliminar
  4. Hola Fran, mira tengo una duda, yo tengo los dos buscadores en mi pagina, pero cuando se busca con el de la pagina asi normal, al rato sale tambien la busqueda de google, sabes porque sera? http://www.tutorialesbyneto.org/ Sld2

    ResponderEliminar
    Respuestas
    1. Hola!

      Los parámetros que utilizar el Motor de búsqueda personalizado de Google coincide con la búsqueda de Blogger. Para que convivan las dos búsquedas se me ocurren algunas cosas que podrías probar:

      - Utiliza otro tipo de resultado de búsqueda, de tal forma que te aparezca el resultado integrado en tu página, en vez de en una ventana emergente.

      - Personaliza la búsqueda de Google, aquí tienes las instrucciónes oficiales, esto es algo más complejo pero puedes controlar el comportamiento

      Seguramente hay más posibilidades, si descubres alguna otra no dudes en compartirlo

      Eliminar
  5. Hola Fran

    He seguido tus pasos y todo funciona OK menos el color de los botones que estoy haciendo mal con los estilos, gracias

    ResponderEliminar
    Respuestas
    1. Hola!

      ¿Qué opción de buscador estás usando? ¿A que botón te refieres? Si pones la dirección de tu blog te intentaré echar una mano

      Genial que te haya resultado de utilidad, un saludo

      Eliminar
  6. Ehy amigo, thanks! de los 3 ahora mismo utilizo el segundo, justo encaja con el color de mi theme de blogger simple de color naranja. Aunque posiblemente luego de meterle adsense, cambie al ultimo buscador ya que el segundo, como que sale un mensaje azul diciendo estos son todos los resultados, como que no se ve tan bonito, pero esta bien, y si le metiera adsense, también lo veo algo sobre exceso a los anuncios. Creo yo.

    Bueno gracias x la info me sirvio de mucho saludos!

    ResponderEliminar
    Respuestas
    1. Hola Anónimo!

      Me alegra que te haya servido, un placer!

      Eliminar
  7. Hola, muchas gracias por la ayuda pero ahora estoy utilizando el segundo y funciona todo normal, pero cuando se esta en otra pagina diferente a la principal no lo encuentra, ¿Hay alguna forma para que funcione en cualquier pagina de mi blog?

    ResponderEliminar
    Respuestas
    1. Hola Hinatayaoi!

      ¿A que te refieres que no lo encuentra? Pásame la dirección de tu blog y le echamos un vistazo ¿te parece?

      Un saludo

      Eliminar
    2. Oh, ya me funciona al parecer es el / que iba antes de 'search' y asi me funciono y me busca en cualquier pagina.

      Gracias por la ayuda :D

      Eliminar
    3. Hola, yo tengo el mismo problema. ¿A qué te refieres con "al parecer es el / que iba antes de 'search' y asi me funciono"?

      en mi blog http://www.cmusxoanmonteslugo.edu.es/ he puesto un buscador 2 (en la columna de la derecha abajo), pero solo funciona desde la página de inicio. si entro en una entrada y busco no va (no da resultados)

      ¿puedes explicar mejor esa solución que encontraste?. gracias

      Eliminar
    4. Hola Coordinador,

      HinataYaoi se refieres que modificando la línea:
      <form action="search/" id="ba-cuadrobusqueda" method="get">

      por:
      <form action="/search" id="ba-cuadrobusqueda" method="get">

      Le funciona, seguramente estás en el mismo caso, prueba sí y ya me cuentas ;)

      Eliminar
  8. MARAVILLOSO.
    VOY A CREAR BLOGGERPEDIA.
    TRANCRIBIRE ENCICLOPEDIA ENCARTA Y WIKIPEDIA.
    LO NECESITABA MUCHISIMO.

    ResponderEliminar
  9. Gracias lo acabo de probar y funciona perfectamente

    ResponderEliminar
  10. Hola, he utilizado el segundo buscador y deseo saber si los resultados (la palabra que busco) pueden aparecer resaltados.

    ResponderEliminar
    Respuestas
    1. Hola Antonio, Blogger no tiene esa funcionalidad, la única forma que se me ocurre es emplear javascript, pero de forma directa no se puede.

      Eliminar
  11. Hola, el buscador 2 es el mio, me vino re bien, pero tengo un problema, dice que ordena los resultados según relevancia, no hay forma de que lo haga alfabéticamente? por favor, seria de gran ayuda!

    ResponderEliminar
    Respuestas
    1. Hola Guillermo, que yo sepa no existe forma alguna con el buscador 2 directamente.

      Eliminar
  12. Como puedo hacer para que en el cuadro de búsqueda propio de blogger no aparezca el recuadro con las palabras sugeridas debajo? Muchas gracias Fran!

    ResponderEliminar
    Respuestas
    1. Hola Monkey! No se a lo que te refieres cuando dices "palabras sugeridas debajo", puedo que lo que estés viendo sea algo propio de tu cliente web?

      Gracias a ti ;)

      Eliminar
  13. Hola, estoy usando el motor de búsqueda personalizada de google con la opción de utilizar un propio buscador hecho con CSS. Mi problema es que al buscar utiliza el buscador hecho con CSS y debajo del pie de pagina recien aparece la busqueda de google.

    Creo que la solución es esta, pero no la entendí:

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

    Podrías dar un ejemplo de que debería cambiar, gracias.

    ResponderEliminar
    Respuestas
    1. Hola Nico,

      Una posible forma de resolverlo: (Aunque es preferible personalizar el aspecto con la herramienta que te ofrece Google)

      1. Implementa la búsqueda personalizada de Google tal como expongo en el punto 3
      2. Sustituye «<gcse:search></gcse:search>» por «<gcse:searchresults-only ></gcse:searchresults-only>»
      3. Ahora añade el cuadro de búsqueda naranja del punto 2, pero sustitye «<form action="search/" id="ba-cuadrobusq">» por «<form action="" id="ba-cuadrobusq">»

      Ya me cuentas ;)

      Eliminar
  14. genio!!!!!!!muchas gracias!!!!!!!!! te tengo en favoritos, soy novata y me fue de mucha ayuda.

    ResponderEliminar
    Respuestas
    1. Hola Laura,

      Bienvenida, espero que te diviertas en mi morada , muchas gracias :-)

      Eliminar
  15. Hola Fran:
    Utilice el primer ejemplo que diste, pero yo lo quiero posicionar a la derecha de mi blog y por defecto se ubica a la izquierda. Muchas Gracias y espero me puedas sacar mi inquietud.

    ResponderEliminar
    Respuestas
    1. Hola QAC,

      Si entras en la sección "Diseño" puedes decidir dónde se mostrará el gadget, puedes crearlo en el lateral derecho o moverlo.

      Un saludo ;)

      Eliminar
  16. Hola Fran, cordial saludo. Mil gracias, super tu orientación, me sirvió de mucho, pues apenas empiezo a diseñar mi blog, aunque lo cree en el 2009. El blog es una gran ayuda para mis estudiantes y también para mí. La dirección del blog es: http://puntokritico.blogspot.com/
    Te agradecería sugerencias para mejorarlo. Hasta pronto

    ResponderEliminar
    Respuestas
    1. Hola Adrian,

      Veo que has podido integrar el buscador, espero que éste y otros tutoriales te ayuden a mejorar tu blog. Tienes una buena temática sobre la que hablar, mucha suerte con tu blog ;)

      Eliminar
  17. Hola, el buscador 2 me anda fenomenal, pero tengo 2 preguntas, la primera, como hago para cambiar el color naranja a otro? y la otra es si se puede,(si es asi como), cambiarle el ancho al buscador, ya que el boton "buscar" me aparece debajo del cuadro blanco para escribir.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Kimba C,

      1) Para cambiar el color del botón, localiza este fragmento de código en el CSS que puse de ejemplo:
      ---
      #ba-cuadrobusq .ba-enviar {
      background:#E8550B;
      border: 1px solid #E3E3D9;
      color: white;
      ...
      }
      ---
      "#E8550B;" representa el color naranja, sustitúyelo por el que quieras, en Internet puedes encontrar herramientas para convertir cualquier color a hexadecimal. De la misma forma "#E3E3D9;" es el color del borde y "white" el del texto del botón.


      2) Para cambiar el ancho del recuadro donde se introduce el texto de búsqueda, localiza "width: 220px;" y sustituye 220px por un valor más pequeño, hasta que encaje como tu quieres.

      Un saludo ;)

      Eliminar
    2. ¡Muchas Gracias por la ayuda, ahora me doy cuenta de lo facil que era modificarlo y estoy satisfecho :)

      Eliminar
  18. Hola Fran,
    Me funcionó personalizar el buscador y todo bien, pero me gustaría que los resultados de la busqueda esten ordenados por defecto en "Fecha" en vez de "Relevancia". Estuve analizando el form del action='/search' pero no tengo ni idea como modificarlo.¿Tienes alguna idea de como hacer eso? Saludos

    ResponderEliminar
    Respuestas
    1. Hola,

      Debes añadir el parámetro "by-date=true", para ello crea otro elemento input (oculto) con nombre "by-date" y asígnale el valor "true", de esta forma:

      <input type="hidden" id="ba-ordenfecha" name="by-date" value="true">

      Ya me cuentas ;)

      Eliminar
    2. Genial! Funcionó! Muchas Gracias :)

      Eliminar
  19. Pues vengo a hacerte una pregunta. Pongo el buscador de Blogger, pero no me va, no me deja escribir nada en el recuadro. Con el 2º me pasa lo mismo, no me deja escribir nada. He logrado poner el de google, sí me deja escribir, pero no me buscar nada, todo el rato me dice que no hay resultados. ¿Sabes por qué puede ser? Quizás hay que esperar a que indexe o algo??! Gracais por tu atención...

    ResponderEliminar
    Respuestas
    1. Esto es lo que me pone antes del recuadro con el código:

      Copia el código siguiente y pégalo en un elemento <.div> en la sección <.body> de tu sitio web, donde quieras que aparezcan el cuadro de búsqueda y los resultados de las búsquedas. (he puesto puntos porque no me dejaba escribirlo tal cual...

      Note: For the most cross-browser compatibility, it is recommended that your HTML pages use a supported doctype such as . CSS hover effects require a supported doctype.

      ¿Será que no lo tengo que poner en un HTML?

      Eliminar
    2. Hola Sandra,

      Con respecto a tu primera pregunta es muy extraño que no te deje escribir dentro del recuadro de búsqueda, es decir, te aparece pero cuando intentas introducir texto no puedes ¿te aparece desactivado? ¿o simplemente no te deja pulsar en el recuadro?

      Tal como lo comentas parece un problema de tu navegador, para estar segura deberías probar con otro y ver si te sucede lo mismo.

      Ya me cuentas ;)

      Eliminar
    3. Eso mismo, está desactivado, y me pasa en todos los navegadores. El de google también lo puse y me sale todo el rato que no hay resultados. Me imagino que será algo de la plantilla, pero bueno... Gracias igualmente!!

      Eliminar
  20. no me aparece la opcion de crear motor de busqueda personalizado que hago

    ResponderEliminar
    Respuestas
    1. Hola Francisco,

      Esa opción no aparece en Blogger, debes acceder al enlace que comento en el artículo: https://cse.google.es/cse/.

      Eliminar
  21. Hola.
    Estoy interesada en agregar una caja como la primera que agregaste aca pero en lugar de un buscador, que sea para suscribirse (El Feed).
    He visto blog que lo tiene tipo buscador y con una imagen encima que le indica al visitante a suscribirse..
    Podrias hacer algun tuto para ello?
    Gracias anticipadas.

    ...Otra cosilla, es que yo estoy utilizando una plantilla html5 que compre y le logre ponerle fondo al blog, ya que no daba con el codigo, de hecho no lo tenia yo lo agregue. Pero luego de ponerlo, observo que me quedan transparentes las entradas, el sidebar y me gustaria ponerlo en color blanco.
    Aqui te dejo el enlace de mi blog. Quizas me puedas ayudar!
    Gracias nuevamente.
    www.amantesliterarios.com/
    Las entradas son de prueba en lo que lo arreglo.

    ResponderEliminar
    Respuestas
    1. Hola,

      Tendré en cuenta el tutorial que propones, creo que puede ser muy útil ;)

      Con respecto al problema que tienes en tu blog he intentado acceder, pero parece que lo tienes privado.

      Saludos

      Eliminar
  22. Enhorabuena por tu blog :), con tu ayuda he conseguido poner un buscador personalizado mejor que el que salía por defecto en blogger. Si me surgen más dudas para mejorar mi blog, ya sé que éste es un buen sitio de consulta.

    ResponderEliminar
    Respuestas
    1. Hola María,

      Un placer tenerte por aquí, si te puedo resolver alguna de esas dudas que te surjan por aquí estoy ;)

      Eliminar
  23. HOLA, lo primero darte las gracias por tu ayuda ... es clara, práctica y ajustada a la realidad.
    Soy nueva en esto, llevo a penas dos semanas. Me ha pasado como a María, con tu ayuda he conseguido poner un buscador, porque el gadget original de blogger no me funcionaba. Pero aleatoriamente, me funciona cuando le da la gana. Cuando lo creo y pruebo va bien, luego desde fuera de mi cuenta también funciona, pero al cabo de un rato, otro momento, otro día ... deja de funcionar, me dice "La página que estabas buscando en este blog no existe." La cual hace un momento SI había mostrado. He puesto otra vez tb el gadget de blogger por si acaso funciona ... y tampoco funciona. Agradecería me ayudases. Si ves cualquier otra cosa ... agradecería tu opinión. Gracias.
    Decirte que el blog lo hago pensado en que lo usen mis alumnos, por eso es tan visual.

    Mi blog: laticherth.blogspot.com

    muchas gracias,

    Marta

    ResponderEliminar
    Respuestas
    1. Hola Marta,

      ¡Que bien! Un blog the inglés, me hago seguidor ;-)

      Vamos a solucionar ese problemilla con el buscador. Fíjate en lo que te ocurre, lo vemos con un ejemplo ¿te parece?

      Entra en tu blog y nada más entrar busca "animals"... ¿funciona no?

      Ahora ve a la sección TAGS que tienes en el lateral selecciona la etiqueta "animals" y una vez entres en esa etiqueta vuelve a buscar "animals... ahora no funciona :-(

      Ya hemos quitado la aletoriedad, sabemos que no funciona cuando estás dentro de una dirección distinta a la principal. Pues manos a la obra:

      En el código que pusiste, fíjate en esta línea:
      <form action="search/" id="ba-cuadrobusqueda" method="get">

      Modifica "search/" y pon "/search". Ahora te funcionará en todos los casos.


      Ya me cuentas como te fue Marta ;-)

      Eliminar
    2. Uf... que RÁPIDO y EFICAZ ... !!! ;-)

      Parece que ahora funciona sin problemas.

      THANK YOU VERY MUCH . Muchísimas gracias.

      Eliminar
  24. Hola! Es increíble. Es la segunda entrada de este blog que pongo en práctica y funciona de verdad ¡a la primera! Muchas gracias.
    He visto que la última publicación es de noviembre de 2014. Ojalá vuelvas a retomarlas. Está todo tan claro y resulta tan sencillo que parece que hasta entiendo de estos temas ;) Un saludo

    ResponderEliminar
    Respuestas
    1. Vaya Sansouart, muchas gracias, es agradable leer que ha resultado útil. Tengo muchísimas ganas de escribir nuevas entradas en este blog, espero que muy pronto ;)

      Eliminar
  25. Saludos Fran...buenisimas tus explicaciones.
    Tengo un problemilla, el caso es que mi blog tiene solo Una Entrada, a modo de informacion, el resto son comentarios, quisiera que el cuadro de busqueda incluyera en los resultados, las palabras de los Comentarios y no solo de la Entrada.

    Por ejemplo:
    Si en la Entrada no está la palabra "corazón", pero un usuario la incluyó en un comentario, y un nuevo visitante que use el buscador y tilde la palabra "corazon" se le muestre entre los resultados el comentario anterior.
    Espero haber formulado bien mi duda.

    Este es mi blog: http://victimasdefraude.blogspot.com/

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Oscar,

      Te has explicado perfectamente, desgraciadamente la búsqueda de blogger no incluye los comentarios, lo siento.

      Gracias a ti por pasarte ;)

      Eliminar
  26. Hola.

    Tuve varios problemas con el buscador incluido en la plantilla que uso para mi blog, pero con tu ayuda todo ha vuelto a funcionar de maravilla.

    Estoy usando la tercera opción: Búsqueda personalizada de Google.

    Gracias por tu ayuda.

    ResponderEliminar
  27. Gracias, porque me ha servido de gran ayuda.

    ResponderEliminar
  28. Bueno he instalado hace 3 semanas la tercera opción, búsqueda personalizada de Google, me ha asociado el ID de adsense, todo bonito, pero no arroja ningún resultado de ninguna entrada (estan indexadas las 24 que tiene hasta ahora el blog, con su sitemap, y en google), pero si pongo cualquier palabra que figuran en los títulos de las entradas, me dice siempre el mismo mensaje: "no hay resultados". ¿Alguna idea?. ¡Desde ya gracias!

    ResponderEliminar
    Respuestas
    1. Buenas, dime la URL de tu blog para poder echarle un vistazo y lo vemos.

      Ya me cuentas.

      Eliminar
    2. Buenas Fran. La URL es http://guiadetaekwondo.blogspot.com.ar/

      Actualizo datos: en la Search Console de Google, he estado usando la herramienta "explorar como Google" e indexado desde ahí también las páginas del blog, para ver si aparece algún resultado en los próximos días.
      Otro dato: en la consola de adsense, en la configuración de la búsqueda personalizada, lo tengo puesto en Buscar en este sitio: "Incluir sçolo esta página específica o el patrón URL que he introducido"(la url con el /* al final), anteriormente he probado "incluir todas las páginas que contenga esta URL", y la de "extraer enlaces dinámicamente de esta página e incluirlos en mi motor de búsqueda", donde al elegir incluir todas las páginas con las que enlaza, ahí en los resultados de vez en cuando me aparecia el canal de Youtube, o la página de facebook, pero de entradas en el blog, nada.

      ¡Gracias por el tiempo!

      Eliminar
    3. Agrego: El otro resultado que aparece en el buscador, es de algún que otro post (2 hasta ahora solamente), pero con la extensión para móviles (la URL terminada por /?m=1 ). Pero no logro que aparezca ninguna de las entradas, ni viejas, ni nuevas, del blog. ¡Gracias!

      Eliminar
    4. Buenas, ahora mismo aparecen 3 entradas indexadas en Google y tu buscador es capaz de buscar por esas 3, lo más seguro es que inicialmente no tuvieses aún indexadas las entradas.

      Desde el buscador de Google puedes introducir site:http://guiadetaekwondo.blogspot.com.ar/ para comprobar lo que tienes indexado.

      Es normal que las primeras semanas de vida del blog tarde en indexar el contenido.

      Ya me cuentas ;)

      Eliminar
  29. Hola Fran, he añadido el segundo buscador con CSS y he modificado algunos valores. No obstante, necesito tu ayuda porque no sé cómo sacar el margen negro que se genera al tocar el cuadro de búsqueda. Tampoco pude sacar el color amarillo que se coloca al autocompletar la búsqueda ni el borde azul que se genera a tocar el botón del buscador. Mi sitio es http://oldxn.blogspot.com Espero tu respuesta. Saludos cordiales.

    ResponderEliminar
    Respuestas
    1. Hola Facu,

      He accedido al blog pero no veo el buscador ¿estás haciendo pruebas?

      Un saludo,
      Fran

      Eliminar
  30. Hola Fran, he de decir que tu tutorial em sirvió de mucho, sin embargo hice algunos cambios a mi blog y tengo un problema con el buscador naranja: el nuevo diseño de mi blog hace que el buscador aparezca sólo en las entradas individuales, y al hacer una búsqueda busca sólo en la fecha de la misma entrada, es decir, en .com/2016/03 y no arroja resultados. ¿Crees que haya alguna modificación para que, en las entradas individuales pueda hacer una búsqueda de todo el blog? Me serviría muchísima tu ayuda, ¡saludos!

    ResponderEliminar
  31. me gusto mucho tu cuadro de busquea naranja lo puse en un blog que tengo sobre futbol, pero una cosita como le hago para que no me muestro mas de 6 entradas, por ejemplo si le pongo real madrid puffff me muestra como 30 publicaciones y se empieza hacer pesado el blog. Se podra aplicar un limite minimo de mostrar 6 entradas por busqueda?

    ResponderEliminar
  32. La importancia de tener un buen buscador en un blog hace que el porcentaje de rebotes disminuya, eso también ayuda a nuestro SEO debido a que los usuarios navegan con mayor facilidad por nuestro sitio, por lo tanto, deciden regresar.
    Gracias por el tutorial

    ResponderEliminar
  33. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  34. OFERTAS DE PRÉSTAMOS Y LA INVERSIÓN HASTA 10.000.000 €
    ¿Tienes un proyecto?
    Una necesidad de financiación y otros.
    Somos capaces de proporcionar crédito y la inversión 10 000 000 euros para una tasa de interés de 2,5% por año. Oferta válida para todas las personas capaces de pagar nosotros.
    * Bienes raíces préstamos.
    * Préstamo de inversión.
    * Préstamo de auto.
    -Edificio de la deuda.
    * Rescate de crédito.
    * Préstamo personal.
    Si necesita crédito para otras razones no lo dude, póngase en contacto con nuestro gerente para obtener más información.
    Estaríamos encantados de contar con usted como un cliente.
    Correo electrónico: loanprivate.invest@gmail.com

    ResponderEliminar