Viajar por Europa

abril 07, 2011

cambiar la fecha de posicion en entradas blogger beta

Explicaré como cambiar la fecha de posición en las entradas de blogger beta. Es decir para el blog nuevo de blogger. Pondremos la fecha debajo del titulo de las entradas.

Además de cambiar la fecha de posición bajo los titulos de las entradas vamos a ver como:
-Poner una fecha a cada título.
-Cambiar el tamaño y color de la fuente en la fecha.


Cambiar la fecha de posición bajo el titulo de la entrada
Voy a indicar facilmente como cambiar la fecha que aparece en la parte superior del titulo de las entradas del blog y la vamos a colocar debajo de dicho titulo.

La fecha del post viene definida por la variable  data:post.dateHeader

Primer paso: copia plantilla, entra en Diseño-->HTML-->expandir artilugios

Busca el siguiente grupo de lineas (3)


<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

</b:if>


Seleccionalos con el ratón y cortalos. Pegalos en notebloc y reservalos.

A continuacion busca las siguientes lineas:


<b:includable id='post' var='post'>

<b:if cond='data:post.title'>

<h3 class='post-title'>

<data:post.title/>

</h3>


Debajo de H3 es decir a continuación de h3 pega las tres lineas que tenias reservadas en el notebloc. Si recuerdas son las que tienes en la primera parte:


<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

</b:if>


Guarda la plantilla.

Como  poner una fecha para cada entrada.
Si te fijas, en blogger cuando escribes dos o más entradas, en un mismo día, solo sale impresa la fecha en la primera de las entradas. Cada entrada no tiene su fecha cuando están editadas en el mismo día. Vamos a hacer que cada entrada tenga fecha.

Buscamos otra vez las tres lineas siguientes. Son las que hemos pegado despues de h3.


<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

</b:if>


Sustituyelas por las siguientes:


<b:if cond='data:post.dateHeader'>

<script>var ultimaFecha = '<data:post.dateHeader/>';</script>

<h2 class='date-header'><data:post.dateHeader/></h2>

<b:else/>

<h2 class='date-header'>

<script>document.write(ultimaFecha);</script>

</h2>

</b:if>

El titulo de cada entrada tendrá su fecha debajo.
Guarda plantilla.

¿Quieres cambiar el tamaño de la fuente, para que el título sea más pequeño o más grande? El diseñador de plantillas de blogger no te permite cambiar la fuente de la fecha que acompaña al titulo de las entradas, tienes que entrar en plantilla (edición HTML) y modificarla directamente.

Busca en la plantilla el grupo de lineas que te indico a continuación y tu mismo verás como puedes modificar los pixes. El tamaño aparece 14px solo tienes que indicar en lugar de 14 lo que quieres.


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


Si tienes algún problema (hay plantillas más complicadas) lee este post: cambiar tamaño de la fecha en las entradas 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.