Viajar por Europa

abril 17, 2011

cambiar tamaño de la fecha en las entradas

En el campo fecha de entrada podemos modificar fuente, tamaño, color, todos los atributos.
Cambiar el tamaño en las fechas de entradas en blogger diría que más bien es una obligación. Sobre los títulos de los blogs de blogger la fecha aparece como protagonista, más incluso que el título. En las nuevas plantillas de blogger no puedes modificar tamaño ni fuentes de la fecha de las entradas, entonces tendremos
 que hacerlo en el código fuente, a mano. El problema surge cuando la fecha no viene definida como grupo y por tanto no tienes opción de acceder a la fuente, tamaño, ni color. Yo lo he solucionado fácil, sigue la lectura que te lo explico.

Lo primero de todo es saber como blogger llama a la fecha en las entradas. Lo relacionado con las entradas en la plantilla de blogger lo tenemos como grupo: date-header, solo tenemos que buscar ésta variable y actuar sobre sus características. Es así de fácil. Dentro de éste grupo encontramos las variables  date.font y la variable date.text.color. Así es que el problema se reduce simplemente a cambiar los valores del tamaño de fuente, que vienen expresados en px y los valores de los colores y fuentes.

Así es que simplemente accedemos a la plantilla de blogger (Diseño-->edición HTML-->ampliar artilugios) y buscamos lo siguiente:


<Group description="Date Header" selector="h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 10px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#997755" value="#997755"/>
   </Group>


Y sobre estas lineas modificamos como preferimos que se vea la fecha si mayor o menor, color, etc.
Como dije al principio, el problema surge cuando no encuentras en la plantilla la variable date.font.
Quieres cambiar el tamaño de la fecha en las entradas de tu blog, entras en edición HTML de tu plantilla y te dispones a hacer un trabajo fácil, tecleas CTRL+F y escribes date.font; te llevas la sorpresa ¡ no hay ningun elemento! ¿que hago entonces?.

Yo he encontrado la solución, es mi solución, quizás no sea la mejor, pero creo que es la solución correcta.

1º Defino el grupo de fecha de cabecera del post  (Group descriptión Date Header).
2º La doy de alta en /* Headings.

Dentro del HTML busca en plantilla lo siguiente o parecido, claro está. Aquí aparece la plantilla Picture Window, porque es una de estas que te comento que no tiene el date.font definido.

Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

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

En las líneas siguientes verás las definiciones de Groups, así es que haremos nosotros mismos la definición de grupo Date Header. ¿Donde? ¿Cómo?.

Creo que en cualquier lugar del apartado correspondiente, yo lo que hice, aplicando la lógica, es grabarla a continuación de:


<Variable name="post.border.color" description="Border Color" type="color" default="#dddddd" value="#dcdcdc"/>
   </Group>


Y lo que grabé es lo ya indicado anteriormente, al principio de éste spot:


<Group description="Date Header" selector="h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 10px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#997755" value="#997755"/>
   </Group>


A continuación buscas y pegas debajo de las órdenes que ya estén escritas, la lineas que te indico:

/*Headings
-----------------------*/


h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}


En la plantilla que te he comentado Picture Window de Josh Peterson, una vez ha realizado ésta segunda opción, el resultado es:


/* Headings
----------------------------------------------- */

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  margin: 0 0 .5em;
}


h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}


Ya puedes guardar plantilla. Te recuerdo que siempre hagas una copia de seguridad antes de tocar la plantilla, por muy fácil que te parezca la modificación, se precavido.

Si lo que quieres ahora es poner la fecha debajo del título de la enreada, tengo escrito dos posts para ésta operación.

Cambiar la presentación de las entradas en blogger
Cambiar la fecha de posición en la entrada de blogger 

No hay comentarios:

Publicar un comentario

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.