Mostrando entradas con la etiqueta titulos de los posts. Mostrar todas las entradas
Mostrando entradas con la etiqueta titulos de los posts. Mostrar todas las entradas

21.12.12

Cambiar color de los títulos de los posts de Blogger


Algunas plantillas de Blogger, como la Simple y la Picture Window, no habilitan, en el Diseñador de plantillas, la opción para cambiar el color de los títulos de los posts o entradas:

Página principal ► Diseño ► Personalizar ► Avanzado ► Título de la entrada

Diseñador de plantillas, títulos entradas

Otras plantillas, como la Travel Awesome, sí tienen esa opción:

Diseñador de plantillas, color títulos entadas
Podemos, en las plantillas que no la tienen, habilitar esa opción.


Habilitar la opción para cambiar el color de los títulos de las entradas

Aplicando el sentido común podemos deducir que si adaptamos, en la plantilla de un blog que no tiene la opción para cambiar el color de los títulos de las entradas, los códigos que en otro blog sí habilitan esa opción, lograremos que, en el primero, también la habiliten. Es lo que haremos.

Vamos a utilizar la plantilla Simple (que no tiene la opción), y la plantilla Travel Awesome (que sí tiene la opción).

Para ambos casos vamos a Editar HTML:

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

Localizamos, en las dos plantillas, las definiciones de las variables correspondientes a los títulos de las entradas, en la sección de las variables, poniendo dentro del rectángulo de búsqueda (search) la primera línea del siguiente código:

/* Variable definitions
====================

y las utilizaciones de las mismas, en la sección de los posts, poniendo dentro del rectángulo de búsqueda (search) la primera línea del siguiente código:

/* Posts
----------------------------------------------- */

Los códigos correspondientes son:

  • En la plantilla Simple

      1.- Definición de la variable de los títulos de las entradas:
<Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

      2.- Utilización de la variable de los títulos de las entradas:
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

 

  • En la plantilla Travel Awesome

      1.- Definición de las variables de los títulos de las entadas:
<Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
   </Group>

      2.- Utilización de las variables de los títulos de las entradas:
h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

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

h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}

Para habilitar la opción que permite modificar los colores de los títulos de las entradas, en el blog de la plantilla Simple:
  1. Eliminamos en la plantilla Simple el código 1.
  2. Copiamos el código 1 de la plantilla Travel Awesome y lo pegamos en el sitio que ocupaba el código 1, que eliminamos en la plantilla Simple.
  3. Eliminamos en la plantilla Simple el código 2.
  4. Copiamos el código 2 de la plantilla Travel Awesome y lo pegamos en el sitio que ocupaba el código 2, que eliminamos en la plantilla Simple.
Si al hacer Vista previa en el blog de la plantila simple no vemos los títulos de las entradas es porque el color de los mismos es igual el del fondo del blog. Guardamos plantilla, vamos al Diseñador y podremos observar que ya está habilitada la opción para cambiar el color de los títulos de las entradas.

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