...

Modificar la fecha de tus entradas

18 dic 2014

A mi me gusta más tener la fecha de las entradas justo debajo del título de las mismas, pero para modificar su localización tendrás que tocar un poco de la plantilla html.

Pero, antes que nada, tendrás que ir a CONFIGURACION => Idioma y Formato y escoger la apariencia de la fecha, en términos de números y datos. Por ejemplo, yo en este blog he querido que no se mostrara la hora en que publico las entadas, pero sí la fecha, de este modo:

día / mes / año

pero eso va a gustos. Escoge tú el formato que prefieres y dale a guardar.

Antes de tocar la plantilla, acuérdate de hacer una copia de seguridad: PLANTILLA => Crear/Restablecer copia de seguridad.

Pues bien, vamos a PLANTILLA => Editar HTML => buscamos (CTRL+F) data:post.dateHeader =>  y borramos estos tres párrafos:

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

 => ahora buscamos (CTRL+F) b:includable id='post' var='post => y miramos unos cuantos párrafos más abajo, hasta encontrar </h3> => y, justo debajo, pegaremos el código que anteriormente hemos borrado:

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

Con esto ya hemos conseguido que la fecha se muestre debajo del título de las entradas pero si, como yo, quieres que ésta, además, esté centradita, tendrás que pegar, en vez del código anterior, este que te doy:

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

Se acabó! Guarda los cambios y dale a Ver Blog para que veas cómo ahora la fecha te aparece debajo del título de las entradas y, según lo hayas elegido así o no, centrada.

Peeeeeerooooo.....si, además quieres modificar o eliminar el rectángulo que hace de fondo a la fecha, o quieres modificar el color mismo de ésta, hará falta un poco más.....:
Aplica este código CSS para eliminar o modificar el color del fondo de la fecha (background-color: (transparent si no quieres, o #ffffff con el color que prefieras) y este otro para modificar el color de las letras y/o números de la fecha (color: #96ceb4)

.date-header span {
background-color: transparent;
color: #96ceb4;
}

Y, por último (buff!!) si pretendes cambiar el tamaño o la tipografía de la fecha, aplica este código CSS: si quieres cambiar el tamaño, modifica donde pone 11, la tipografía, modifica donde pone 'Open Sans' y, si la prefieres más finita, borra "bold". Voilá! Acordaos que AQUÍ os he explicado cómo cambiar las tipografías.

h2 {
font: normal bold 11px 'Open Sans';
}



No hay comentarios:

Publicar un comentario

Muchas gracias por tu comentario!