Header Ads

Centrar los Titulos en Blogger

Centrar los Titulos en Blogger
Si tienes un Blog creado en la plataforma Blogger y los títulos de los Gadgets o el Titulo de tus entradas o post, inclusive el Titulo de tu Blog, salen alineados a la izquierda y por motivos de diseño y atractivo deseamos centrarlos para que tengan un mejor aspecto y no sabes como centrarlos, esta entrada es para ti XD. En esta entrada aprenderemos a centrar los Títulos de nuestro Blog en Blogger, ya sean de los Gadgets de las entradas o el titulo general.

Para centrar los Titulos en nuestro Blog, nos adentraremos un poco al código CSS, pero no se preocupen no es nada complicado, al contrario es fácil de entender y de aplicar.

CENTRAR LOS TÍTULOS DE LOS GADGETS:

Los Gadgets sin duda son lo dinámico e interactivo del Blog, en una entrada anterior vimos como poner una imagen de fondo al Titulo de los gadgets, así que esta ves aprenderemos a centrar el Titulo de los gadgets, para hacerlo solo tenemos que aplicar el siguiente código:



Si deseas que el Titulo se alinee a la derecha solo sustituye center por right y si quieres al lado izquierdo pon left, aunque esta alineación es por defecto.

Este Código lo añadimos en la opción añadir CSS de Blogger:

Añadir css en Blogger


CENTRAR LOS TÍTULOS DE LAS ENTRADAS:

Otro elemento importante y de mucha importancia son los Títulos de las entradas, recuerden nunca dejar de poner un Titulo a sus post. Para centrar el Titulo de nuestras entradas usamos el siguiente código:


De la misma forma que en los títulos de los Gadgets si queremos alinear el Titulo a la derecha sustituimos center por right.

CENTRAR EL TITULO DEL BLOG:

Para finalizar, centrar el Titulo del Blog, también puede ser parte del diseño de nuestro Blog, así que para lograr esto solo agregamos el siguiente código:




OJO: Las clases e identificadores que estamos usando, son generalmente las usadas por las plantillas de Blogger, si por algún caso usas una plantilla que no tiene dichos elementos, te recomiendo inspecciones los títulos de tu Blog, e identifiques que clase o identificador los define, luego el código para centrarlos es el mismo: text-align:center;

Cualquier duda o Aporte Hacerlo Por Comentarios. Gracias por si Tiempo!




52 comentarios:

  1. Qeé bien!!! Hace tiempo estaba pensando como hacer esto, acabo de ponerlo en mi blog, pero solo me ha centrado alguno de los títulos de los gadgets. Me estará faltando algo?
    Muchísimas gracias por tu ayuda.
    Ale

    ResponderEliminar
    Respuestas
    1. Hola Alejandra, me alegra que te aya servido, me ha pasado tu problema pero lo e solucionando añadiendo el código al gadget respectivo que no se centra, así que seria cuestión de que identifiques la clase o identificador que define el titulo de ese gadget y añadir el código text-align:center;

      Eliminar
    2. Me ha pasado exactamente lo mismo, hay títulos de gadget que no se centran. He leído como corregirlo pero no se cómo hacerlo, no sé como encontrar el gadget en HTML. Si fueras tan amable, ¿podrías ayudarme?
      Gracias de antemano. Un saludo.

      Eliminar
  2. HOLA SOY YO TENGO UN PROBLEMA QUIERO CENTRAR EL TITULOS DE LAS ENTRADAS Y AGO LOS PASOS QUE TU HACES Y NADA NO SE PONE EN EL CENTRO NESECITO TU AYUDA ASME ESE FAVOR AYUDAME

    ResponderEliminar
    Respuestas
    1. Hola Owen me hace raro que no se te centren los títulos de las entradas con ese código CSS. quizás no estemos identificando bien la clase de los títulos de tu blog, pero me hace raro ya que esa Clase que menciono en este tutorial es general para todas las plantillas de blogger. Me ayudara que me des la dirección de tu blog para poder identificar la clase que define los títulos de tus entradas y poder ayudarte!. Saludos Owen.

      Eliminar
  3. Hola aki esta mi blogerr http://zonadeldescontrol1.blogspot.com/ ayudame

    ResponderEliminar
    Respuestas
    1. Hola Owen estaba analizando un poco el código de tu blog y tienes razón, con el código que pongo en este tutorial no centra tus títulos, así que estuve probando y llegue a que podíamos hacer lo siguiente:
      h3 post-title
      {
      text-align:center;
      }
      o puedes solamente usar lo siguiente pero no es muy recomendado pero funciona:
      h3
      {
      text-align:center;
      }
      Pruebalos Owen y me pasas el dato si te funciona. Saludos :D

      Eliminar
  4. nada no centra que dices si te doy mi blog y lo centras tu porque yo para esto soy un poco brutico

    ResponderEliminar
    Respuestas
    1. Hola Owen, con permiso de Neytor te digo lo que quizá sea una solución...la que a mí me ha servido después de visitar este y otros blogs sin conseguir centrarlo y es así.

      En cada entrada, cuando se hace y se ponen las fotos etc, pues arriba donde pones el título hay que encerrarlo con las etiquetas "center" TÍTULO DE LA ENTRADA "/center"

      Como el comentario no me deja poner estos signos: < > he tenido que poner las comillas: " " pero hay que sustituirlas por esos: < >
      O sea: TÍTULO DE LA ENTRADA

      ok?


      Hay que hacerlo en cada entrada, claro, pero a mí es lo único que me ha servido.

      Eliminar
    2. Hola gatzaroimage gracias por brindarnos tu aporte, el Blog te lo agradece.

      Eliminar
  5. Excelente aporte. Llevo varios días buscando el modo correcto con el código exacto para centrar los títulos de las páginas de mi blog. Entrando en:
    Plantilla -> Personalizar -> Avanzado ->Añadir CSS y copiar y pegar el código:
    .post-title
    {
    text-align: center;

    }
    y pinchar en "Aplicar al blog" se centran todos los títulos de las páginas.
    Muchísimas gracias en particular por ofrecerme la solución correcta,
    y muchísimas gracias en general por aportar tus conocimientos gratuitamente en este blog al servicio de todos los internautas.
    Saludos y ánimo para tu excelente trabajo.

    ResponderEliminar
    Respuestas
    1. Gracia Luis me alegra que te aya sido de mucha utilidad. estamos para servir. Gracias por tu comentario!

      Eliminar
  6. queria preguntarte si sabias la forma de centrar el menu de paginas en blogger, con css, por que ahora cambiaron algunas cosas en blogger y es mas dificil encontrar ciertos codigos para modificar, todos me han dicho que modifique o agregue esto o aquello pero no saben decirme donde y creo que seria mucho mas facil si lo hiciera directamente en css, el problema es que mi blog tiene el titulo centrado pero quiero centrar tambien los menues, por que quedan algo incomodos( http://mediafuego.blogspot.com/ ), espero tu respuesta y sino tenes la solucion, al menos recomendame con alguien, desde ya gracias

    ResponderEliminar
    Respuestas
    1. Hola David me di una vuelta por tu Blog, y encontré una solución no tan recomendada pero si te permitirá obtener lo que quieres, es usar
      .widget ul {
      margin-left: 300px
      }
      Haber intenta con eso, aunque no es muy recomendable porque debes tantear la distancia hacia la izquierda en px para poder centrarlo. Gracias por Comentar espero te sirva.

      Eliminar
  7. Muy interesante articulo, me ha servido mucho,
    Pero me podrías decir como se centra también la fecha de las entradas que va encima del titulo?
    graicas

    ResponderEliminar
    Respuestas
    1. hola Esther puedes aplicar el siguiente estilo:
      .date-header
      {
      text-align:center;
      }
      espero te sirva gracias por comentar. Cualquier inconveniente solo deja un comentario :D

      Eliminar
  8. Muchas gracias ! me ha sido super útil llevaba mucho tiempo buscándolo....
    gracias

    ResponderEliminar
    Respuestas
    1. De Nada Esther estamos para servirte. Gracias por comentar.

      Eliminar
  9. Un truco muy útil y sencillo. Funcionó a la perfección.

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Victoria, me alegra que te aya gustado el post y sobre todo que te aya sido muy útil. Gracias por Comentar Saludos!!!

      Eliminar
  10. Gracias, funcionó el codigo para centrar títulos del blog, Gracias Eduardo!.

    ResponderEliminar
  11. Muchas gracias ^u^ lo entendi de inmediato :D

    ResponderEliminar
  12. Hola,no se si este sera el mejor sitio para preguntar por mis dudas bloggers..Llevo bastante con el blog y e hecho muchos cambios pero en uno de esos cambios no se que paso.. que algo habré tocado que no me permite hacer ya nuevos cambios en determinadas cosas..
    Me gustaría centrar el leer mas de los post y ponerlo algo mas grande al igual que las sugerencias de antiguas entradas tenerlas centradas y la barra de debajo de la cabezera centrarla también..por mas que miro tutoriales y pongo los links que me dicen no ay cambio alguno..me podrías ayudar con eso?
    Este es mi blog: http://rym27forever.blogspot.com.es/

    Gracias anticipadas.

    ResponderEliminar
  13. Hola!! ante todo enhorabuena por tu blog. Tengo un problema ( ya he variado el css y el html), no consigo que el título del blog me salga centrado http://sixlooks.blogspot.com.es/ . Muchísimas gracias

    ResponderEliminar
  14. Hola Neytor,
    quiero poner el título a la derecha de la imagen, algo lo he desplazado pero me gustaría que el título quedara a la derecha de la imagen.
    Esta es la dirección de mi blog, para que veas la cabecera. ¿qué puedo hacer?
    muchas gracias

    ResponderEliminar
  15. Perdona no he puesto la dirección del blog:
    http://orientafuenmayor.blogspot.com.es/

    ResponderEliminar
  16. Hola! Después de que no me funcionara he probado h3 { text-align:center; } y si me centra los títulos de las entradas :D Pero querría que me centrase los títulos de los gadgets ¿Me puedes ayudar? ^^

    ResponderEliminar
    Respuestas
    1. Utilizo .widget .title { text-align: center; } y sigue si centrarme los titulos de los gadgets D:

      Eliminar
    2. Hola Nezumi estuve viendo tu blog, y vi tu codigo y es un poco diferente qeuisas por el echo de tu plantilla, pero probe con:
      .widget
      {
      text-align:center;
      }
      espero te sirva cualquier problema solo comentalo, estoy para ayudarte! saludos!

      Eliminar
    3. ¡Me va perfecto! Muchísimas gracias por la ayuda :D

      Eliminar
    4. De nada Nezumi, estamos para ayudarte, cualquier otra duda no dudes en preguntar! espero que sigas visitando el blog!

      Eliminar
    5. Por supuesto! Oye espero no molestar pero ya que estoy.. ¿hay alguna manera de quitar lo de Plantilla Con la tecnología de Blogger que sale abajo del todo? Muchisimas gracias de nuevo

      Eliminar
    6. HOLA Nezumi, descuida no es ninguna molestia, si hay una forma, te vas a diseño en el portal de tu blog, y buscas el gadget de reconocimiento que generalmente esta abajo de todos como pie de pagina, hay puedes editar lo que dice puedes poner tu propio contexto al igual que hice yo, o si no deseas nada simplemente elimina el gadget, espero te ayude, si tienes inconvenientes no dudes en preguntar. gracias por comentar!

      Eliminar
  17. Muchisisisimas gracias. Dios te bendiga y que sigas ayudandonos a todos.

    ResponderEliminar
  18. Muchas gracias, muy buen post. No tuve problemas para implementar el cambio. Saludos

    ResponderEliminar
  19. Muchas gracias muy buen post, pero no se centran todos los titulos de los widgets :c

    ResponderEliminar
  20. Muchísimas gracias :-)
    http://i-learn-english-with-isa.blogspot.com.es/

    ResponderEliminar
  21. MUCHAS GRACIAS EL BLOG ESTA MUY INTERESANTE

    ResponderEliminar
  22. ola men una pregunta como hago para poner el titulo del post en la imagen para mostar del la entrada

    ResponderEliminar
  23. Muchas gracias. Llevo tiempo intentando centrar el título del gadget del índice y no había manera. Al fin lo he conseguido con tus consejos. y por casualidad no podrías decrme cómo cambar el aspecto de los marcos de los gadgets?? sólo encuentro cambiar tipo de marco, pero me gustará darles forma y sombra.

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

    ResponderEliminar
  25. Muchas gracias. Había probado otros códigos y no funcionaban. Los tuyos funcionan perfectamente!!!

    ResponderEliminar
  26. ¡Gracias por la ayuda! Me vino bárbaro el post.

    ResponderEliminar
  27. yo quiero poner como titulo de blog un titulo que hice en photoshop en formato png pero no se como hacerlo.llevo 2 dias con esto y no se como se hace. por favor alguien sabe como????

    ResponderEliminar
  28. mi blog tiene solo a un lado pequeño el titulo y no puedo cambiar por favor ayuda este es mi blog
    http://recetafacilesdeliciosas.blogspot.com/

    es un deber y no ocnsigo que el titulo ni la foto ocupe todo el espacio

    ResponderEliminar
  29. A mi me ocurre lo mismo pero solo en la versión móvil, no se aplica el CSS aunque ponga. Mobile y el resto o aunque ponga solo h3...

    Probé a poner center título /center (con las flechitas >) y se centra pero no a lo largo... Es como si estuviera el título metido en una caja en el lado izquierdo...

    ResponderEliminar
  30. Gracias por tu aporte. La centrada del título de los gadgets funcionó perfectamente. La pregunta que tengo es ¿donde coloco el código para centrar el titulo de las entradas? No lo has escrito. Lo coloqué debajo del anterior dejando 2 espacios pero no funciona. Te agradezco tu ayuda. Bendiciones

    ResponderEliminar
    Respuestas
    1. Puedes entrar en el código fuente de tu blog, si no entiendes mucho codigo primero inspecciona elemento con la opción del navegador, una vez que tengas localizado dicho codigo puedes utilizar la clase y centrarlo con CSS.

      Eliminar
  31. Actualización. Leí la sugerencia que le dió a Owen y la segunda me sirvió. Gracias

    ResponderEliminar