Situar el gadget buscador junto al título del blog (o en otro sitio cualquiera) | Oloblogger Parece que un buen lugar y que agrada a la mayoría para poner su buscador interno, es en la parte su...

24 de noviembre de 2011

Situar el gadget buscador junto al título del blog (o en otro sitio cualquiera)

Parece que un buen lugar y que agrada a la mayoría para poner su buscador interno, es en la parte superior del blog, más o menos a la altura del título, dentro de la cabecera. Cómo se puede colocar ahí es lo que vamos a ver en esta entrada, aunque lo cierto es que con el mismo sistema podremos ponerlo dónde nos plazca.

Las modificaciones las he hecho desde el nuevo escritorio (nueva interfaz), así que las referencias van literales como aparecen en él. Para el clásico es más o menos lo mismo pero lo comento para evitar confusiones.


Lo primero que haremos será acceder a Plantilla ► Edición HTML para modificar la sección que corresponde a la cabecera de manera que nos admita varios widgets. Por defecto esta parte del blog viene con unos parámetros que limitan el número de artilugios que puede contener y que por otra parte, bloquea la posibilidad de añadir alguno. Respectivamente son maxwidgets y showaddelement y así es como viene si no se han modificado:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Puede que en vuestra plantilla la parte superior no tenga la misma nomenclatura (header), pero si buscáis sin expandir artilugios, lo normal es que sea la primera sección que aparezca.

Cabecera Blogger
Cabecera original

Los parámetros que antes hemos comentado se tienen que cambiar de la siguiente manera:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Con un 2 en maxwidgets ya nos vale para este caso (cabecera+buscador), pero si necesitáis poner más cosas por ahí arriba, podéis aumentar ese número en cualquier momento. Con respecto a showaddelement, el valor para poder añadir elementos es precisamente yes.

Ahora si vamos a Diseño, podremos ver que en la parte de la cabecera aparece un nuevo recuadro encima del elemento cabecera que nos permitirá Añadir un gadget.

Cabecera en vista Diseño
Nuevo bloque para añadir gadgets en la zona de la cabecera
Añadir un gadget "Cabecera"

Ahora llega el momento de añadir el buscador. Pinchamos en Añadir un gadget, seleccionamos el que se llama Cuadro de búsqueda, marcamos las opciones que nos interesen y guardamos. Ahora lo que veremos en nuestro blog será algo similar a esto:

Buscador en cabecera
Cabecera con buscador encima
Ya sólo nos resta dar las propiedades adecuadas para que la caja del buscador no ocupe todo el ancho y que además se ubique a la derecha del título. Eso lo hacemos accediendo a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS. Allí tecleamos o copiamos esto:

#CustomSearch1 {
float:right;
position:relative;
top:16px;
right:0px;
width:200px;
height:33px;
padding-left:36px;
background:url(http://1.bp.blogspot.com/_0eC4K-qZ7AM/Sr1bJb_EBCI/AAAAAAAAJ4w/qzUSCige6gk/s400/lupa.gif) no-repeat 0px 0px;
}

Con TOP y RIGHT podéis cambiar la ubicación exacta del buscador. El ancho (WIDTH) y el alto (HEIGHT) también los podéis modificar a vuestro gusto. Las dos últimas líneas (PADDING y BACKGROUND) son un plus que se me ha ocurrido haciendo estas pruebas y que sirven para poner un icono a la izquierda de la caja del buscador. Podéis cambiar el dibujito o directamente anularlo del código borrando esas dos líneas.

Buscador posicionado en el lugar deseado
Cabecera con buscador alineado

Actualización: Cuando la caja del buscador no permita escribir texto en ella, añadir una propiedad más a #CustomSearch1. En concreto, z-index:1000; o cualquier otro número grande. Eso hace que la caja quede por encima del resto de capas, ya que la causa de que esto ocurra es que se queda por debajo en algunas plantillas.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

145 comentarios :

  1. Como siempre Genial !!!!!
    Saludos Oloman.
    Gabriela.

    ResponderEliminar
  2. Exceléntemente explicado Oloman, muchas gracias.
    Saludos

    ResponderEliminar
  3. Muy bueno, un buscador bien visible es muy util para blogs como el tuyo y el mio. En blogs en que la busqueda de posts es imprescindible.

    ResponderEliminar
  4. Gracias oloman por el dato pero también quiero saber como puedo mover gadgets desde edición HTML ya que quiero moverlo de lugar desde la misma plantilla sin entrar a diseño
    Saludos Oloman espero me puedas entender y me ayudes

    ResponderEliminar
  5. Oh que bien! Quería mover mi barra de búsqueda hace ya rato pero no veía claro como. Gracias por la info.

    ResponderEliminar
  6. Excelente!!!! y si la cabecera tiene una imagen, también funciona? se va a ver el buscador?

    ResponderEliminar
  7. Hola, te felicito por tu blog me parece muy completo, queria preguntarse si tu sabias porque no me deja escribir en la caja del buscador del blog si abro el blog con firefox, en cambio si abro el blog con explorer si me deja escribir en el buscador y funciona perfectamente.

    ResponderEliminar
  8. La espera fue larga, muchas gracias por la entrada

    ResponderEliminar
  9. Muchas gracias por el tutorial Oloblogger, pero como hago para que me queden por encima de la cabecera mas no en la parte superior.

    ResponderEliminar
  10. Marcos Gratis, tanto como "genial" :) En sólo un detalle más porque, en mi opinión, es uno de los mejores sitios para poner el buscador, al principio del todo.

    Gildo Kaldorana y tú siempre tan amable ;)

    Así pienso yo también Johnny. Por cierto, supongo que ya lo sabes pero suelo echar un vistazo a tu Twitter y difundo lo que veo interesante para los demás allí y en Facebook ;)

    Jhonnysan, personalmente creo que desde Diseño es la mejor opción para evitar algún tipo de error tocando la plantilla, pero de todas formas, para eso sólo tienes que cambiar de sitio el trozo de código correspondiente en la parte HTML. No necesitas expandir las plantillas de artilugios y simplemente tendrías que cortar la línea del gadget entera y pegarla más abajo o más arriba, dentro de la misma SECTION. Las líneas que generan los gadgets comienzas con <b:widget id='....

    ResponderEliminar
  11. Olmo Axayacatl moverla la puedes mover fácilmente desde Diseño. Esto sería más bien "solaparla" con otro elemento. En este caso con la Cabecera.

    María García, sólo tienes que probar y verás que sí. No obstante, pudiera ser que tuvieras que añadir un z-indez a #CustomSearch1 para forzar que quede por encima. Si no te funciona con lo de la entrada, añade esto último.

    Tablón de Anuncios no tengo ni idea, pero observo otra cosa que puede ser una pista: tampoco se puede seleccionar texto en tu blog. Puede que tengas algún truco habilitado para evitar esa selección y que eso interfiera también en los formularios, porque he visto que el de las suscripción de feed tampoco funciona. En cualquier caso es algo que te afecta a todos los formularios por lo que veo.

    Chiknaui.Mikistli Joel Molina Reyes, siempre me pasa lo mismo: tardo mucho en poder publicar todas las cosas que tengo en mente :D

    Daniel Jonathan Tafur Vera para dejarlo por encima de la cabecera tendrías que hacer lo que se explica aquí, a excepción de lo último, es decir, no dar estilo al gadget buscador. De esa manera se quedaría por encima.

    ResponderEliminar
  12. Oloman te deje un comentario en el post de la galeria simple: http://www.oloblogger.com/2011/02/sencilla-galeria-de-imagenes-en.html
    Saludos que estes bn.

    ResponderEliminar
  13. Gracias por la respuesta Oloman Oloman, cuando le pongo sin estilo css, me carga dentro de la cabecera, pero en la parte superior se crea el gadget con un fondo blanco, quedando el banner de mi cabecera en la parte inferior mas no por debajo del gadget, saludos.

    ResponderEliminar
  14. Por qué yo lo hice y pude ubicar bien el gadgets pero queda como sifuera una imagen, es decir, no puedo ingresar palabras sobre el campo ni presionar el boton Buscar. ¿Por? Me puedes ayudar con esto?

    ResponderEliminar
  15. Hola Oloman. Me ocurre lo mismo que ha Tablón de Anuncios y a MFC. Con Firefox no se puede introducir texto en cambio con IE no me pasa. Además tengo algún otro formulario en el blog y no ocurre eso. Puedes echarle un vistazo en www.elongando.com. Gracias por tu blog.

    ResponderEliminar
  16. Martín Rocha, en cuanto llegue allí, te contesto.

    Daniel Jonathan Tafur Vera, se ve que no te entendí bien. Si quieres solaparlo, tienes que poner todo lo que se indica aquí y si quieres dejarlo encima (arriba de la cabecera), entonces no habrá que hacer la última parte. Si tienes algún problema concreto, me gustaría verlo.

    MFC, Buhasapos y Tablón de Anuncios, probad a incorporar a la clase .customsearch un z-index:5000;
    Creo que vuestras páginas tienen posicionadas imágenes superpuestas con z-index y eso provoca que el buscador se quede por detrás y por tanto, visible pero inaccesible.
    Contadme el resultado.

    ResponderEliminar
  17. Hola de nuevo Oloman.
    Ya le he puesto el "z-index:5000;", pero sigue sin poderse seleccionar. Es algo que solo ocurre con Firefox. Gracias por el intento.

    ResponderEliminar
  18. Hola otra vez. Rectifico. Ya me funciona. Estaba haciendo pruebas (sin CSS y con CSS) y he observado que sin CSS funcionaba y al volver a aplicar el CSS de nuevo, ha empezado a funcionar. Es decir, a los que no os funciona, probar a borrar y volver a añadir el código CSS. Misterios de la informática. Un saludo y de nuevo, muchas gracias.

    ResponderEliminar
  19. Funcionó perfecto colocando z-index. Muchas gracias Oloman por tu ayuda.
    Un abrazo !

    ResponderEliminar
  20. Alégrome MFC San Juan :) Es que vuestras plantillas necesitan ese ajuste.

    ResponderEliminar
  21. Lo he colocado pero ni puedo cambiar el tamaño ni puedo moverlo de sitio, se queda en la cabecera con el ancho total.¿que puedo hacer?

    ResponderEliminar
  22. Esta bueno tu artículo, pero preferiría utilizar un método más efectivo de la siguiente manera:

    .header {width:48%; float: left; margin:0 auto 1%;}
    .header2 {
    float:right;
    position:relative;
    top:30px;
    right:0px;
    width:48%px;
    height:33px;
    padding-left:36px;
    background:url(http://1.bp.blogspot.com/_0eC4K-qZ7AM/Sr1bJb_EBCI/AAAAAAAAJ4w/qzUSCige6gk/s400/lupa.gif) no-repeat 0px 0px;}

    La cuestión es dividir la cabecera en 2 partes, añadiendo:



    para mi es así.

    ResponderEliminar
  23. Hablando de tecnología sólo lo puedes mover si previamente haces lo que se explica al principio de cambiar los parámetros de maxwidgets y showaddelement. Quizás en tu caso tienes un locked=true. Si es así cambia el valor a false.

    Carluís ese es precisamente el que uso. Supongo que en la parte que no salió indicabas como crear una nueva sección con ese header2. Es quizás la mejor opción porque permite hacer más cosas, pero con esta entrada intenté explicar un método que requiriera tocar lo menos posible la parte HTML. Muchas gracias por tu aportación.

    ResponderEliminar
  24. No hay manera, no puedo moverlo, y está colocado el locked= false, no se que puede ser.

    ResponderEliminar
  25. ¿En qué blog tienes ese problema Hablando de tecnología? ¿En el que tienes visible en tu perfil de G+?
    Supongo que lo que es el buscador, lo puedes poner sin problemas en la parte superior. No te entendí bien en tu anterior comentario, pero una vez allí, no hace falta moverlo de verdad. Se "mueve" añadiendo el código CSS que está en último lugar en esta entrada ¿hiciste también eso?

    ResponderEliminar
  26. Esta muy bueno este post!! pero lo malo que el " cuadro de busqueda" no sirve... kise buscar algo en mi blog y no sale nada!!

    ResponderEliminar
  27. Cuando eso ocurre es porque tus posts no están indexados por Google. Es cuestión de tiempo Microboy90.

    ResponderEliminar
  28. Cuanto mas!! tengo mas de 2 anios con mi blog y no sale nada,pero le cambie plantilla y con el buscador que trae por defecto,le doy buscar algo y me lo encuentra rapidamente!! entonces que es?

    ResponderEliminar
    Respuestas
    1. El gadget buscador que propongo aquí es el propio de Blogger que a su vez es de Google. Es el que yo tengo funcionando así como mucha gente más. Si te funciona en la barra lateral te tiene que funcionar en cualquier otro sitio.

      De todas formas, dos comentarios más abajo leo que ahora lo quieres abajo. Yo puedo ayudar dentro de un orden pero no sin que tú mismo sepas exactamente qué es lo que quieres.

      Eliminar
  29. Buen día y Feliz Año Nuevo!!!!
    Pues yo ni modo hice todo tal cual al pie de la letra y no lo puedo ubicar a la derecha, sólo arriba o abajo de la imagen de la cabecera, inclusive probé achicando la imagen... y nada...será porque tengo un motor de búsqueda personalizado?

    ResponderEliminar
    Respuestas
    1. Es posible, porque este truco se basa en las clases que genera el buscador que se añade como gadget directamente desde Blogger. Para estar segura de si ese es el problema, busca "CustomSearch1" en tu plantilla. Si no tienes esa clase entonces no funcionará. Es que yo no sé que clases lleva el que usas.

      Si no lo tienes claro, indica en cuál de tus blogs ocurre.

      Eliminar
  30. Olo!! pero si el gadget lo kiero poner abajo,? como hay que hacerle?

    Gracias espero respuesta!!

    ResponderEliminar
  31. Que tal Oloman
    Tengo una pregunta
    Hice todo lo que hiciste al pie de la letra.
    Tambien lo modifique con los perimetros que me gustaron a mi.
    Y listo Guardo los cambios
    Y le doi ver mi blog
    al momento de tratar de escribir no puedo escribir ahi.
    si me puedieras ayudar lo mas pronto posible
    seria genial.
    Gracias por este buen aporte.
    Saludos Lukaito

    ResponderEliminar
    Respuestas
    1. ¿Dónde no puedes escribir? "Ahí" es algo bastante inconcreto. Por otra parte, no veo el buscador por ningún sitio.

      Eliminar
    2. hola oloman, creo a lo que se refiere es que no se puede escribir en el buscador, enrealidad no hase nada.
      ami me pasa lo mismo y probe con otro buscador que encontre en internet y no funciona.
      este es mi blog:
      http://aztlan-ejemplo.blogspot.com/
      esperare tu respuesta

      Eliminar
    3. Pues si es lo mismo, la solución va para los dos y eso os pasa por usar plantillas del nuevo diseñador :p

      Añadid una propiedad más: z-index:500;

      Eliminar
  32. Oloman tengo una duda, yo tengo un buscador flotando al lado derecho de mi cabecera. Como hago para sacar el vinculo o enlace que tiene el fondo de imagen de mi cabecera el cual siempre me lleva a la pagina de inicio. Necesito esto porque genera confusión con mi gadget. Gracias.

    ResponderEliminar
    Respuestas
    1. Busca en tu plantilla header-inner y por los alrededores estará ese enlace, aunque no te recomiendo que lo quites, porque es fundamental tener un acceso rápido en todas las páginas a la de Inicio y además, en la cabecera es dónde buscamos todos en primer lugar.

      Quizás te venga bien echar un vistazo a esta entrada con la que podrás ver que existe un sistema en el que puedes situar el enlace sólo en la parte de las letras con esto otro.

      Eliminar
    2. Gracias por responder Oloman, te cuento que encuentro la linea: #header-inner, pero no encuentro por ningún lado el enlace, en mi caso no tendría problema con eliminar el vinculo porque tengo un menú horizontal el cual tiene la opción Inicio, es por eso que quiero eliminarlo.

      Eliminar
    3. Sin almohadilla. Eso que encontraste es el estilo. Tienes que buscar con Plantillas de artilugios expandidas y lo normal es que encuentres dos, una para la versión móvil y otra para la normal. Más o menos, la parte que interesa tiene este aspecto:
      <!--Show the image only-->
      <div id='header-inner'>
      <a expr:href='data:blog.homepageUrl' style='display: block'>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
      </a>

      Ahí es dónde tienes que borrar el <a expre:href... y su cierre.

      Eliminar
    4. Muchas gracias por la explicación Oloman me sirvió de mucho.

      Eliminar
  33. disculpa, y si yo quiero uno como el que tienes tu, pero mi blog es así: http://dl.dropbox.com/u/10199237/Ashampoo_Snap_2012.02.07_16h03m17s_002_.png

    y lo quiero poner en esta parte:
    http://dl.dropbox.com/u/10199237/Ashampoo_Snap_2012.02.07_16h03m59s_003_.png
    Aunque tmb en esa parte que lo quiero poner tengo para poner un cuadro de HTML aunque solo me salio en cuadrito ya que en el diseño de plantilla no sale u-u
    ¿ podrías ayudarme?, de antemano gracias :D

    ResponderEliminar
  34. ademas no entiendo por que mi buscador no carga, o si puedo ponerlo en esta parte pero alineado a la derecha
    por que tengo el buscador abajo y no puedo escribir en el,
    quisiera ponerlo hay pero quería poder modificarle el tamaño, ya que si lo hago como el del Tutorial, se me desalinean todas mis entradas
    http://dl.dropbox.com/u/10199237/Ashampoo_Snap_2012.02.07_18h26m47s_001_.png
    este es mi blog
    http://layuripedia.blogspot.com/

    ResponderEliminar
    Respuestas
    1. La anterior respuesta (#34.a) vale para esto. El float que propuse en la entrada hará flotar a la derecha el buscador.

      Y si tu buscador actual no funciona es porque no es el gadget oficial de Blogger, sino otro sistema más sencillo que sólo busca internamente y con un algoritmo muy deficiente. Intenta lo que aquí explico, por favor, aunque sea en un blog de pruebas. Utiliza tu plantilla actual para ello (descargas copia de seguridad y luego subes al nuevo blog, el de prueba).

      La siguiente pregunta (#36) también queda contestada aquí... y no necesitas abrir nuevo comentario para ir añadiendo idem. Utiliza el enlace responder de este mismo para poder seguir mejor el hilo ;)

      Eliminar
  35. o una manera de poner el buscador en un cuadro de HTML pero que al momento de buscar salga el resultado de la búsqueda en la parte de arriba de las entradas, como con el que trae por defecto.

    ¡saludos y perdona las molestias u-u!

    ResponderEliminar
  36. No me funcionno.. osea me queda excelente posicionado pero no me deja buscar NADA! Que hago oloman?

    http://paradojante.blogspot.com

    ResponderEliminar
    Respuestas
    1. ¿Viste la actualización al final de la entrada?

      Eliminar
  37. El mío quedó perfecto, pero para probar busqué una palabra que sí se que hay y da que no se encuentra. ¿Algún consejito?
    Desde ya gracias por tus aportes Manolo, siempre me sacas de apuros jeje, este es mi tercer blog (con cuenta nueva) y como hace rato no ando por la blogosfera estoy bien olvidada de algunas cosillas.

    ResponderEliminar
    Respuestas
    1. Sólo dos cosas.

      La primera asegurarte de que tienes activada la opción para que los buscadores te indexen. En el
      Escritorio>Configuración&gr;Básico>Privacidad>Aparece en Blogger Visible para los motores de búsqueda>Editar

      Lo segundo paciencia. Hay que esperar a que Google vaya recopilando tus páginas y su contenido.

      Eliminar
    2. Okis, gracias por tu respuesta. La opción que me queda es la paciencia jeje. Porque incluso le di en weblogs validar mi feed y todo bien y en Escritorio-Configur-Básico-Publicar URL redireccionada del feed... también lo hice, pero aún no funciona.
      Señor! dame paciencia con Google!! jaja

      Eliminar
  38. hola que tal, hay forma de poner una barra estilo la que viene con bloguer (esa con las opciones de añadir entradas, etc)y que el buscador del blog este sobre ella ?

    PD: Es decir que la barra no tenga nada mas que el buscador

    ResponderEliminar
    Respuestas
    1. Hola. Sería lo mismo que hacer un menú horizontal en la parte superior, pero cambiando la lista de enlaces por un buscador. A bote pronto encontré estos:
      http://www.quierocrearunblog.com/2009/08/como-crear-un-menu-superior-horizontal.html
      http://ciudadblogger.com/2009/08/menu-horizontal-con-borde-superior.html
      http://www.todoblogger.com/2009/09/menu-superior.html
      Con jQuery: http://www.pizcos.net/2011/07/barra-superior-para-tu-blog-totalmente.html

      Eliminar
  39. Hola como estas, te hago una pregunta, sabes como crear un buscador con filtro.
    Digamos estoy haciendo una búsqueda de Películas pero le pongo un filtro a esa búsqueda, ejemplo:

    Año 2012
    Genero Drama
    País Argentina


    Y así sucesivamente ponerle filtro a la búsqueda, pero solo los filtro que yo quiera que salga en la búsqueda, si se puede te agradecería mucho que me ayudaras o que me dijera donde buscarla

    Gracias Saludes desde Nicaragua.

    ResponderEliminar
    Respuestas
    1. En un principio, cualquiera que use un buscador puede ir añadiendo los parámetros para filtrar resultados que quiera. Supongo que a lo que te refieres es a, una vez obtenidos unos resultados, buscar sólo dentro de ellos añadiendo sucesivamente nuevos parámetros. Si es así, no sabría cómo hacerlo.

      Eliminar
  40. Hola! Arriba entendí que esto mismo se puede hacer en cualquier parte del blog. Entonces, ¿qué tendría que hacer si quiero ponerlo al lado derecho del gadget "páginas" (o pestañas)?

    ResponderEliminar
    Respuestas
    1. De la misma manera que aquí situamos inicialmente el gadget buscador encima del que forma la cabecera, tú lo tienes que poner encima del que forma el menú de páginas. Luego ya lo mueves como se explica en la entrada hasta ponerlo más abajo y a la derecha.

      Eliminar
    2. Gracias! Probaré esto cuando mi buscador funcione XD

      Eliminar
    3. Los buscadores tardan algunas semanas en indexar tus entradas

      Eliminar
    4. Hola! Hoy lo he probado y me ha funcionado. Al principio tenía problemas con la cabecera (tengo una imagen) que se me achicó, pero le cambié el ancho y funcionó, así:

      #header-inner{
      width:1004px !important;
      }

      Y luego el otro problema era que se me desplazó todo el blog hacia abajo, quedando un espacio arriba del header y lo arreglé con lo sgte.

      .header-inner{
      margin-top:-100px;}

      Espero haberlo hecho bien, probé con hartas cosas hasta que esto lo solucionó XD

      Muchas gracias por el tutorial =)

      Eliminar
    5. Pues gracias por mencionarlo Ann. Seguro que alguien le viene bien tu experiencia antes comentada. Además te quedó muy mono el diseño de la barra de búsqueda ;)

      Eliminar
    6. Hola! Perdón por molestarte de nuevo, pero hace poco, viendo una página (no recuerdo cuál) donde muestran cómo se ve una página web en diferentes navegadores, me di cuenta que, excepto en Google Chrome y otro navegador más, el buscador no se ve donde debería verse =/ Se ve más abajo. Y sinceramente me gustaría arreglar eso porque según las estadísticas de mi blog son más personas que usan Mozilla Firefox las que ven mi blog, pero me gusta cómo se ve ahora el buscador en Chrome.

      ¿Podrías ayudarme? =)

      Eliminar
    7. Te aviso que por el momento voy a quitar el buscador de donde está y poner un menú con buscador integrado, pero de todas formas quisiera saber la solución al problema antes descrito, porque si tiene solución, entonces volvería a usar esa plantilla en mi blog =) Gracias de antemano

      Eliminar
    8. Pues si no lo veo no soy capaz de decirte como arreglarlo, deberías haberlo dejado provisionalmente. De todas maneras, los programas esos para simular como se ve una web en distintos navegadores son sólo eso, simulaciones y no siempre son fiables.

      Lo mejor es que tengas también en tu ordenador al menos Firefox e IE y que los veas con ellos directamente.

      Eliminar
  41. Ahh y otra cosa, aunque no tiene que ver con esto ¿qué entradas me recomendarías para que de forma lo más sencillamente posible (ojalá) pueda cambiar el aspecto de todo lo referente a comentarios? Es que no me gusta cómo está =S Por si acaso mi blog es http://9noctis9.blogspot.com/ y muchas gracias por todo =)

    ResponderEliminar
    Respuestas
    1. No sé si te servirá, pero este es el listado completo de selectores que manejan lo de los comentarios, incluyendo comentarios sobre para qué sirve cada uno. Sólo tienes que modificar los que te interesen cambiando las propiedades CSS:
      http://www.oloblogger.com/2012/01/blogger-configurar-comentarios-anidados.html

      Eliminar
    2. Gracias! Lo intentaré en mi blog de pruebas =)

      Eliminar
  42. Muchas gracias! Me ha sido de mucha utilidad.

    ResponderEliminar
  43. Hola Oloman, disculpa, quiero saber una cosa:
    Quiero agregar un gadget HTML/Javascript en mi blog, pero lo quiro en la parte superior (en la perte de arriba), quiero que esté bien "pegadito" digamos como un "navbar". Mi problema es que hay un espacio y no lo puedo juntar, mira: http://deskfacucity.blogspot.com.ar Por favor una solución urgente!

    ResponderEliminar
    Respuestas
    1. Para pegarlo arriba del todo tendrías que hacer desaparecer la navbar que es la que ocupa la parte superior. Para eso tienes que insertar en tu plantilla (entre las etiquetas SKIN) lo siguiente:

      #navbar {display:none;height:0;width:0;}

      Eliminar
    2. Sigo en la misma Oloman, ese código que me diste no me sirve, intenté con otro para eliminarlo, se me eliminó pero sigue en la misma posición. Por favor una ayuda :/

      Eliminar
    3. Eso tiene que funcionar si lo pones dónde te dije. En caso de duda, que sea justo antes de
      ]]></b:skin>

      Eliminar
    4. ERES UN CAPO! pero hay un espacio a la izquierda, me puedes ayudar?

      Eliminar
    5. AYUDA OLOMAN POR FAVOR!

      Eliminar
    6. En esta parte es dónde controlas los márgenes de los gadgets que sitúes encima de la cabecera:
      .header-inner .widget {
      margin-left: 30px;
      margin-right: 30px;
      }
      Si le pones 0px al margin-left, el menú se te quedará alineado con el título del blog.

      Sin embargo, si lo que quieres es que el menú comience en la parte izquierda de la ventana (sin margen alguno), eso ya es más complicado, amén de que probablemente no quedaría bien dando la sensación de estar descentrado.

      Eliminar
    7. ¡Ah! Y no por mucho que me escribas podré contestar antes. Lo hago según voy teniendo tiempo y por orden...

      Eliminar
  44. Oloman, ¿en qué parte de #CustomSearch1 pongo la etiqueta z-index:1000? No me aclaro. Gracias.

    ResponderEliminar
    Respuestas
    1. En cualquier parte. Son instrucciones CSS y por tanto no es necesario seguir un orden determinado cuando sean propiedades distintas. Puedes insertar esa línea al principio, al final o entre cualquiera de las otras. No olvides ponerle un punto y coma (;) al final.

      Eliminar
    2. Ahhh, gracias. Veía que no funcionaba y era por el ; final ¡¡Menudo despiste!! Pero antes que nada quisiera hacerte 2 preguntas:

      1) el buscador no va, es decir, al clicar encima no se puede escribir en la barrita. No sé qué pasa, pues tan solo he añadido el gadget, sin más.
      Y 2) ¿hay alguna manera de que no se vea la herramientas de edición del buscador? Me ocupa toda la cabecera, y estropea la imagen. Ya sé que esto solo lo veo yo y no los visitantes del blog, pero me molesta que esté justo encima de la cabecera. ¿Se puede disimular al menos?

      Gracias por el dato y responder dentro de la brevedad deseada.

      Eliminar
    3. 1) Yo sí puedo acceder a la barra de búsqueda, pero cuando se da el problema que comentas se suele solucionar sólo con añadir el z-index del que hablamos antes

      2) Prueba con esto:
      #searchbox .item-control .blog-admin {display:none;height:0;width:0;}

      Eliminar
    4. Es que yo no puedo escribir nada en el buscador, pero si tú has podido los demás, también. Noto que lo hace el navegador (uso Firefox) porque con Explorer sí he podido escribir y buscar. Gracias por la ayuda.

      Eliminar
  45. Hola Oloman, ya tengo colocado el buscador junto en la barra de página de mi blog, pero me gustaría saber como debo hacer, o si se po¡uede hacer, el superponer una imagen en el buscador, es decir, que quede encima de él y no por debajo como pasa en este caso con la lupa. Si se puede sustituir también me vale. Es que he diseñado la imagen del buscador y querría ponerla en mi blog.
    muchas gracias, me estas siendo de muchisima ayuda :)

    ResponderEliminar
    Respuestas
    1. No entiendo eso de poner una imagen por encima del buscador. Si lo haces no se verá el cajetín ¿no?

      Eliminar
  46. Hola amigo tengo un pequeño problema resulta que hice todo lo que explicaste pero el gatget del buscador queda sobre la imagen de la portada y quisiera saber si se puede poner el gatget arriba de la imagen en el lugar donde va la barra de navegacion y que no ocupe el ancho de mi pagina. Espero que puedas responder gracias

    ResponderEliminar
    Respuestas
    1. Hola. No sé cúal es la dirección de tu blog, pero eso tiene pinta de que te saltaste la segunda parte del post, a partir de "Ya sólo nos resta dar las propiedades..."

      Eliminar
  47. Hola Oloman
    Cómo puedo colocar ese buscador (buscar dentro del Blog) en una etiqueta de la barra horizontal páginas debajo de la cabecera?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Primero tendrías que crear esa barra con las páginas y luego de la misma manera que aquí se coloca cerca de la cabecera y luego se "mueve", tendrías que hacer pero tomando como referencia la caja de las páginas.

      Eliminar
  48. Hola, un poco tarde pero depronto me podría ayudar.

    Hice todo igual y me quedó perfecto pero e gustaría personalizar la caja del buscador, así como lo tiene Usted pero más como está en conecti.ca, es decir quiero quitar ese feo botón simple de "Buscar" y poner un botón (como la lupa) y hacer algo más llamativo. ¿Me podría ayudar? Gracias.

    ResponderEliminar
    Respuestas
    1. Ayer mismo expliqué brevemente cómo hacerlo. Mira este comentario

      Eliminar
  49. Hola Oloman, antes de nada agradecerte todo tu trabajo, eres un fenómeno. Y ahora mi cuestión: En mi blog en vez de un buscador quiero insertar una imagen en la cabecera con un enlace para poder utilizarla como publicidad. He probado con los "position" pero no me funciona. ¿ Podrías ayudarme ? Un saludo crack.

    ResponderEliminar
  50. Se hace igual que se explica aquí para el buscador, pero al llegar al punto dónde se añade un gadget buscador, tú tienes que añadir un HTML/JavaScript con una imagen y un enlace sobre ella.

    Luego tienes que ver que ID tiene ese gadget (será HTMLx) y aplicar ese selector al CSS, en lugar de #CustomSearch1

    ResponderEliminar
  51. Olo, le hago click a tu publicidad en forma de agradecimiento por tu aporte. Muchísimas gracias por compartir tanto.

    Que te vaya bien, amigo.

    Saludos, desde Lima, Perú.

    ResponderEliminar
    Respuestas
    1. ¡Pssssss! Que no te oiga Adsense que me cluje ;)

      Eliminar
  52. Hola Oloman, me ha servido de mucho!
    Pero tengo una imagen grande de cabecera y cuando pongo el buscador se me corta la cabecera... y queda bastante feo, a mi me gustaría que el buscador quedara superpuesto a la cabecera...
    ¿Se podría hacer?
    http://tsukistyle.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. espero respuesta >.<

      Eliminar
    2. Parece que ya lo lograste. No obstante yo cambiaría ese right:0px en #CustomSearch1 {...} por un right: 100px;

      Eliminar
  53. Hola Oloman. Apliqué este estilo en mi blog, pero el gadget se alojó encima de una parte del Header, tapando parte del diseño. La idea es que el cuadro del buscador quede en el mismo espacio del header, pero sin obstaculizarlo visualmente. Qué puedo hacer para lograrlo? Ya intenté con el z-indez, pero no funcionó.

    Mi blog es fomomentos.blogspot. De antemano, gracias.

    ResponderEliminar
    Respuestas
    1. En las reglas de #CustomSearch1, cambia el position:relative por un position:absolute y con eso se arregla. El problema es el fondo gráfico de la cabecera, pero con eso se ignora el espacio que ocupa el buscador y se verá bien.

      Eliminar
  54. Perfecto! De nuevo gracias por la ayuda. Saludos.

    ResponderEliminar
  55. Exelente muchisimas gracias amigo :DDDD

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

    ResponderEliminar
    Respuestas
    1. Se hace igual, pues la clave es usar POSITION. Lo que ocurre es que en lubar de usar customsearch, tienes que meter todo el código de los botones en un div con una nueva clase y aplicar esas reglas a esa nueva clase.

      Eliminar
  57. Hola, Oloman: Gracias por estar ahí, ya te pedí ayuda en otra ocasión y ahora vuelvo a atreverme a molestarte:
    He cambiado mi blog a otra plantilla y la estoy personalizando. La descripción del blog me sale a continuación del título, y yo la querría debajo. Además, hay una caja de búsqueda que no encuentro manera de quitar o de cambiar de sitio y que corta la descripción.
    ¿Puedes echar un vistazo y decirme si hay solución? Gracias de antemano. Un saludo.
    http://maitecicleta.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola. Me parece que no te voy a poder ayudar porque esa es una plantilla de las llamadas "dinámicas" y cómo en ellas se puede modificar poca cosa, nunca me he metido con ellas y no sé cómo funcionan.

      Eliminar
    2. Muchas gracias de todas formas. Investigo por ahí y si encuentro algo útil te lo cuento.
      Un saludo y re-gracias

      Eliminar
  58. muchas gracias oloman me funciono de maravilla ;D http://softwarealfa.blogspot.mx/

    ResponderEliminar
  59. Muchas gracias! me sirvió en mi blog. Muy bueno.

    ResponderEliminar
  60. como subo un banner interno en mi blogger

    ResponderEliminar
    Respuestas
    1. ¿Qué es para tí un "banner interno"? ¿En qué parte de todo Blogger lo quieres?

      Eliminar
  61. Hola. No voy a hablar sobre esta entrada pero como va de buscadores y eres bastante entendido en ésto te quería preguntar una cosilla ¿Sabes si hay problemas con el buscador de blogger?. Hace unas semanas me di cuenta que no iba el buscador de mi blog . Y veo que sigue igual. En el tuyo y en otros mas me pasa lo mismo: No me busca nada y se queda en la misma pagina...y no veo por ninguna lado el motivo. He probado en crome y mozilla :S

    ResponderEliminar
    Respuestas
    1. Nos pasa a todos Noemi... o al menos a muchos. En un principio tendremos que esperar a que arreglen eso.

      Eliminar
    2. okis muchas gracias. Pues entonces dejo de buscar solucion o atajo posible. A esperar toca :)

      Eliminar
  62. gracias oloman eres el as en esto !

    ResponderEliminar
  63. ¡Me ha salido perfecto! No me lo puedo creer, una cosa que hago a la primera... Es que lo has explicado tan clarito que no me ha quedado otra ;) Muchas gracias Oloman, por todo. Te pongo el link del blog que estoy arreglando por si quieres pasar a verlo http://vadepunto.blogspot.com.es/ por supuesto, te enlazo, un saludo

    ResponderEliminar
    Respuestas
    1. hola Maluy vi en tu blog una linea vertical, entre las entradas y la sidebar, quiero como se hace. Gracias!!

      Eliminar
    2. Como Maluy no dice nada, lo haré yo. Pon en la parte CSS de tu plantilla esto:
      .column-center-outer {
      width: 100%;
      border-left: 1px solid #ccc;
      box-sizing: border-box;
      }

      Eliminar
  64. si, efectivamente, gracias Oloman.

    ResponderEliminar
  65. Hola Oloman.
    He hecho mi propio buscador pero no quiero poner una sección nueva sino dentro de la cabecera. En un que tuve que borrar lo puse debajo de header_inner y funcionaba.
    Ahora que estoy creando un nuevo blog lo vuelvo a poner en el mismo sitio, aparece pero no funciona, puse z-indez a 999999 y no hay manera. Lo puse en un widget en la barra lateral y si marcha pero no en la cabecera.

    ResponderEliminar
    Respuestas
    1. en un blog antiguo quise decir...

      Eliminar
    2. Si es el de Tejiendo los Vientos... parece que ya funciona. Si no es ese dime en cuál tienes este problema.

      Eliminar
    3. No es de esa página. Estoy haciendo una nueva desde la plantilla de blogger, ese blog lo hice con el programa artisteer.

      El blog lo tengo como privado hasta que lo termine y lo suba a la de tejiendo los vientos alisios.

      Dentro de la plantilla de blogger lo puse debajo de header-inner :


      No header image
      div id 'header-inner'

      div id search

      form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
      <input id='search-box' name='q' onblur='if (this.value == "") this.value = "Busco...";' onfocus='if (this.value == "Busco...") this.value = "";' size='28' type='text' value='Busco...'/ /form

      /div



      div class 'titlewrapper'
      h1 class 'title'
      b:include name 'title'/
      /h1
      /div
      b include name 'description'/
      /div


      El buscador se ve pero no funciona, en un blog de pruebas anterior si funcionaba pero lo tuve que borrar porque me daba la plantilla un montón de problemas.

      Eliminar
    4. Y los estilos son:

      /*------
      BUSCADOR
      --------*/
      #search {
      margin:0;
      padding:5px 10px;
      width:auto;
      overflow:hidden;
      float:right;
      z-index:1000;
      }
      #search input[type="text"] {
      border: 1px solid #eee;
      border-radius:3px;
      color: #777;
      width: 180px;
      padding: 7px;
      font:normal 10px Muli;
      text-transform:uppercase;
      -webkit-transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s;
      }
      #search input[type="text"]:focus {
      width: 220px;
      }

      Eliminar
    5. ¿No lo puedes hacer público por unos días? Es que me falta información porque no sé cómo está montada toda la cabecera...

      Y el comentario de abajo seguramente no iba por tu comentario :)

      Eliminar
    6. Buenos días, hecho lo que me pides.

      Tengo el buscador también en la sidebar para que veas que funciona. Me gustaría que funcionara igual en dónde lo tengo puesto en la cabecera.
      El blog es este: http://nuevacaraparamibblog.blogspot.com.es/ que luego cuando termine lo pasaré a tejiendo.

      Eliminar
    7. En el mismo sitio pero a la izquierda tengo intención de poner los iconos de las redes sociales. Espero que no me pase lo mismo que el buscador.
      Muchas gracias por tu ayuda.

      Eliminar
    8. Hola Oloman, lo que pretendo es hacer una cabecera parecida a esta http://galauness-demo.blogspot.com.es/.
      Aquí se muestra las redes sociales y el buscador encima de la cabecera. Y lo que yo quiero es que esté dentro de la cabecera, por decirlo de algún modo, encima de la imagen pero en la parte de arriba padding:10 px .
      por eso lo puse en header inner.

      Eliminar
    9. Hola de nuevo, he intentado de todas las maneras poner el buscador en header pero nada de nada. Esto es lo que tengo en header, no veo que tenga nada bloqueado.
      .header-outer {
      background: transparent none no repeat top;
      _background-image: none;
      min_height:300px;
      margin-top: 10px;
      }
      .Header h1 {
      font: normal normal 36px mandevilla_boldbold;
      color: #81d8cf;
      text-shadow: 0 0 0 rgba(0, 0, 0, .2);
      text-align: center
      }
      .Header h1 a {
      color: #81d8cf;
      }
      .Header .description {
      font: normal normal 18px mandevilla_regularregular;
      color: #cf81d8;
      position: absolute;
      top: 280px;
      left:333px;
      text-align: left
      }
      #header-inner{
      position: relative;
      background:url(https://dl.dropbox.com/s/wwfxkjg44vic2q2/cabecera-modificada.png) no-repeat;
      background-position: center;
      background-position-x: 0px;
      background-position-y: 0px;
      background-position: 0px 0px;
      }
      /*.mobile #header-inner {
      background:none;
      }*/


      .header-inner .Header .titlewrapper {
      padding: 240px 0px 0px 100px;
      }
      .header-inner .Header .descriptionwrapper {
      padding: 0 0;
      }
      el blog lo he puesto ya en público http://nuevacaraparamibblog.blogspot.com.es/ . No sé por qué me pasa esto, he mirado la plantilla al completo y no veo ninguna "orden" que bloquee la cabecera. z-index:99999; He probado eliminado el buscado que puse de ejemplo en la sidebar, por si creara algún conflicto, pero sigue sin funcionar. Tal vez sea capricho de blogger.

      Eliminar
    10. Por favor, discúlpame la brasa que te estoy dando

      Saludos.

      Eliminar
    11. Hola Oloman, antes de nada, discúlpame por favor mi pesadez. Ya encontré el fallo. Puse el footer responsive al 100% y también puse header pero no lo completé. Ya funciona.

      Un fuerte abrazo.

      Eliminar
    12. OK. Pues discúlpame a mí por no entrar antes a contestarte pero ando muy saturado y con escaso tiempo... en mi línea. Justo hoy empiezo a contestar los comentarios del día 12 y me encuentro que ya escribiste un buen puñado. Afortunadamente parece que ya lo solucionaste. Siento lo primero y me alegro por lo segundo :)

      Eliminar
    13. Me lo imaginaba. Lo que ocurre es que nos tienes mal acostumbrados ;-D porque nos sueles contestar más o menos prontito. ;-)

      Gracias por tu gran paciencia.

      Eliminar
  66. Realmente interesante, gracias.

    ResponderEliminar
  67. Como se puede hacer que no salga el recuadro de abajo que nos autocompleta las palabras? Muchas gracias!

    ResponderEliminar
  68. Eso es cosa de tu navegador Monkey. No sé siquiera si se puede quitar ese autocompletar, pero es personalizado para cada usuario.

    ResponderEliminar
  69. Buenas noches OLOMAN, mira pues tengo un pequeño error. Hice todo tal cual lo nombras, hasta el index final, ya que el buscador no me permitia teclear.
    El problema es el siguiente: El header continua, osea, el fondo de color azul oscuro sigue, pero se puso un fondo blanco y no entiendo como sacarlo. En todo caso quisiera que sea el buscador TRANSPARENTE, para que de ese modo yo pueda subirlo o bajar a gusto, digo esto porque al header lo diseñe con una imagen que dice "Buscador del Sitio" y de un lado encuadre una parte para que se centre el buscador, pero el problema es ese, ese fondo blanco tapa la parte que falta del header y descompajina todo.

    ResponderEliminar
  70. Cabe destacar que hice el truco, pero no con el gadget que proporciona Blogger, sino con otro. De igual manera deberia funcionar ya que se utiliza la etiqueta del Gadget, en CSS, y se modifica verdad?. Pues quisiera que sea el fondo transparente, y que solamente yo pueda subir o bajar a gusto el gadget. Asi como tambien moverme de izquierda a derecha. pero lo que me molesta es el fondo, me arruina todo el header.

    ResponderEliminar
  71. Quisiera aclarar otro punto, el recuadro de BUSCAR que tiene mi Gadget, esta debajo, cuando deberia estar al lado. Ya toque todo, width, height, y no funciona, no puedo lograr ponerlo de lado, si porfavor me podrias ayudar en eso tambien.

    ResponderEliminar
    Respuestas
    1. Cada código es para una cosa y es difícil que sirva con igual eficacia para otra, aunque sea algo parecido. En este caso si has usado otro código que no es el del gadget oficial, ya estás viendo que te surgen problemas.

      De todas formas, en este caso no es cuestión del gadget ni del truco que aplicaste, el hueco está generado por un selector incluido en tu CSS que ni sé para que será. Es este:
      .header-inner .Header #header-inner {
      overflow: hidden;
      }
      Si eliminas esas líneas el hueco desaparecerá, pero entonces tendrás que cuadrar la cabecera si quieres ajustarla a los bordes de la página. Es fácil que una modificación afecte a otra cosa.

      Y como cosa fácil para lo que es el cajetín y el botón del buscador, añade a #ba-cuadrobusq .ba-textobusq un float: left;

      Eliminar
    2. Hice el cambio de sacar el buscador que tenia, por el que estas dando el ejemplo tu, osea, el buscador de Blogger pretederminado.
      Pero sigue saliendo ese recuadro blanco.
      Segun lo que me dices, en mi css ,osea mi plantilla, tendria que salir la linea que me dices:

      .header-inner .Header #header-inner {
      overflow: hidden;
      }

      Me canse de buscarla y no sale. Entonces nose que hacer para solucionar mi problema.
      Osea, estoy siguiendote los pasos y aun asi no me sale.

      Eliminar
    3. Bien, pues si no lo tienes (realmente está pero no lo cargas tú sino Blogger automáticamente por lo que he visto), entonces añade lo contrario para anularlo:
      .header-inner .Header #header-inner {
      overflow: visible;
      }
      Sobre lo demás, como ahora lo tienes puesto de otra manera, pues no puedo verlo.

      Eliminar
  72. Buenas Oloman, he utilizado tu tutorial para hacer lo mismo pero con los iconos de las redes sociales. En principio todo bien, se me situaban encima del título de la página y cuando hacías click te redireccionaba a dicha red social. El problema ha venido cuando he utilizado el código CSS para ubicarlo (He quitado el padding y la URL de la imagen ya que no me interesaba). Al hacerlo los botones se han visto perfectos pero ya no puedes interaccionar con ellos y no sé porque. Me harías un favor si me pudieses ayudar. Gracias.

    ResponderEliminar
    Respuestas
    1. PD: Aqui el blog en cuestión por si te ayuda. ricardceder.blogspot.com

      Eliminar
    2. Observa la actualización que hay al final del post.

      En tu caso se trataría sólo de poner un z-index:3; al selector #HTML1

      #HTML1 {
      z-index: 3;
      }

      Eliminar
    3. Gracias, se me había pasado por alto. Funciona a la perfección. Un abrazo!

      Eliminar