18.2.10

Centrar títulos de los posts de Blogger


Los tìtulos de los posts se centran sencillamente encerrándolos entre las etiquetas <center> y </center>, pero algunos navegadores no interpretan las etiquetas en los títulos, y éstos, además de no quedar centrados, se muestran como texto plano junto con las etiquetas. Por eso es conveniente hacer los ajustes en la plantilla.
  1. Vamos a Editar HTML:

    Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

  2. Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:

    .post h3 {
      margin:0;
      line-height:1.5em;
      background:url("http://www2.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;
      display:block;
      border:1px dotted $borderColor;
      border-width:0 1px 1px;
      padding-top:2px;
      padding-$endSide:14px;
      padding-bottom:2px;
      padding-$startSide:29px;
      color: $postTitleColor;
      font: $postTitleFont;
      }


  3. Al final del anterior código, antes de }, Agregamos la siguiente línea:

    text-align:center;

Eso es todo.

Nota: Este método funciona con algunas plantillas como Rounders. Con otras plantillas, como Mínima, debemos seguir el siguiente procedimiento, en el cual incluiremos, además, un fondo para el título del post:
  1. Vamos a Edición de HTML:

    Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

  2. Localizamos el siguiente segmento, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:

    .post {
      margin:.5em 0 1.5em;
      border-bottom:1px dotted $bordercolor;
      padding-bottom:1.5em;
      }


  3. Eliminamos el anterior segmento y en su lugar ponemos éste:

    .post {
      background:$bgcolorpost;
      margin:.5em 0 1.5em;
      border-bottom:1px dotted $bordercolor;
      padding-bottom:1.5em;
      }

    .post-title {
      margin: 0;
      padding: 10px;
      text-align: center;
      background-color: #194155;
      font-size: 125%;
      font-weight: bold;
      line-height: 1.1em;
      }


    Las líneas resaltadas corresponden al fondo que le asignamos a los títulos de los posts, con su correspondiente color que, obviamente puede ser el que nosotros deseemos. Si preferimos los títulos sin fondo omitimos estas líneas.

    Recordemos que Códigos de colores hexadecimales es una buena herramienta para asignar colores.

 

Para plantillas nuevas

Para centrar los títulos de las entradas en las plantillas nuevas, vamos a Edición de HTML, localizamos el siguiente código (o uno parecido, debe tener la línea font: $(post.title.font);):

h3.post-title, h4 {   font: $(post.title.font);   color: $(post.title.text.color); }

...y al final del mismo, antes de la llave de cierre, agregamos esta línea:

text-align:center;

Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera

8 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Anónimo #

Excelente la explicación. Apliqué este procedimiento y me funcionó a la perfección. Este blog me ha sido de mucha utilidad. Muchas gracias.
Saludos,
Doris.

Comentario escrito por Anacely : #

Me quedó perfecto, he estado personalizando mi blog gracias a su ayuda.. Saludos.

Comentario escrito por Pedro Pablo Pachón : #

Anacely: Gracias por su visita y felicitaciones por su excelente blog.
Saludos.

Comentario escrito por conchi : #

Enhorabuena por este blog,gracias a su ayuda estoy aprendiendo muchas cosas que antes no sabía.
Un saludo

Comentario escrito por Laia : #

Hola! he intenado varias veces centrar el titulo de las entradas de mi blog pero no funciona.. podrías ayudarme? Gracias

Comentario escrito por Unknown : #

Laia: Si sigues la instrucciones tal y como se indica en el tutorial y no te funciona, puede deberse a la plantilla. Dime ¿Qué plantilla utilizas?

Comentario escrito por Unknown : #

Es la primera vez que dejo un comentario en un blog, y es para darte las gracias por tu ayuda!!!

Un saludo!

Comentario escrito por Pedro Pablo Pachón : #

S3RGIO: Gracias por tu comentario.

Saludos.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.