Revista Cultura y Ocio

¡Blogueemos juntos! Modificar la fecha

Publicado el 18 enero 2015 por Ginnata
Buenos días de domingo... ¿Que tal lleváis la semana? ¿Os habéis perdido algo? Si es así sabéis que podéis suscribiros a le Newsletter, y si queréis la semana que viene puedo hacer un macro tutorial de esto solo, porque es algo muy importante para el blog... Bueno que me enrollo, si queréis ese tutorial, podéis dejar un comentario pidiéndolo.
MODIFICAR LA FECHA
Es algo muy fácil y bastante útil, ya que le aportara al blog un toque diferente y original. Vamos a hacer bastantes cositas. Lo primero que vamos a aprender es lo siguiente:

Cambiar de tamaño la fecha:


¿No es algo que os toque la moral? Quiero decir, que, o tienes una fecha macro gigante, o el titulo de los gadgets diminuto. Y a mi es algo que me molesta. Por eso, no hay problema os traigo un código CSS muy útil para estos casos.
Simplemente vais a: Plantilla-->Personalizar-->Avanzado--> Añadir CSS
Y allí pegamos esto:
h2.date-header {  font-size: 10px;}
Y cambias el valor que esta en rosa, por el tamaño que queráis. Le dais a guardar y listo. Super fácil, y super útil.

Fecha en un circulo:


Es algo que se ha puesto de moda últimamente. ¿Queréis la fecha en un circulo, la mar de mona? Pues yo os traigo la solución. Simplemente seguimos estas instrucciones. Esto vuelve a ser el típico copia pega de CSS, así que ya sabéis.
Plantilla-->Personalizar-->Avanzado-->Añadir CSS
Y simplemente pegamos esto:
.date-header span {padding:23px 7px 23px 7px;border-radius: 100px;/*pb*/}
Ahora lo que tenéis que hacer es jugar con el radio, para ver como de redonda la quieres, y con el padding, para ver como va quedando el relleno. Cambia esos valores a tu gusto, y dale a guardar. ¡Listo! Ya tienes tu fecha en un circulo.

Fecha centrada:


¿Lo tuyo no son los círculos? Si quieres otra manera de poner la fecha tenemos esta opción para ti. La típica fecha centrada encima del titulo de la entrada, sencillo, fácil, e increíblemente bonito. Es la manera en la que yo tengo la fecha. Si la queréis, atentos a esto:
Lo único que esta vez si que vamos a tener que tirar de HTML, pero es un poquito solo, no os preocupéis.
Lo primero que vamos a hacer es como siempre buscar lo que necesitamos, pulsamos CTRL+F y en la barra buscamos lo siguiente:
data:post.dateHeader
Cuando lo halláis buscado tenéis que fijaros en esta parte de aquí:
      <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
Ya que es lo que vamos a modificar para que la fecha salga en el centro. Lo único que vamos a añadir son las etiquetas de <center> y </center>
De tal forma que se nos tiene que quedar así:
      <b:if cond='data:post.dateHeader'>
          <center><h2 class='date-header'><span><data:post.dateHeader/></span></h2></center>
        </b:if>
Le dais a guardar, y listo. Ahora si os queda descuadrada y queréis modicarla un poco, podéis añadir CSS, ya sabéis: Plantilla-->Personalizar-->Avanzado--> Modificar CSS.
Ahora solo tenéis que añadir esto:
h2.date-header {
padding: 20px 0px; /*cambia el primer valor para separarlo a tu gusto del título*/
margin-bottom: 10px; /*cambia este valor  para alear el texto de la entrada*/
}
Simple y sencillo, podéis jugar con los margenes. E incluso añadirle otras cosas. Si queréis que os quede la fecha mas pequeña que los gadgets, y con otra tipografía, podéis pegar este código de aquí:
h2.date-header {
padding: 20px 0px; /*cambia el primer valor para separarlo a tu gusto del título*/
margin-bottom: 10px; /*cambia este valor  para alear el texto de la entrada*/
font: normal normal 9px 'Arial';
text-transform:uppercase;
}
Y listo, así se quedaría encima del texto, pero centrada.
Podéis ver como queda visitando mi blog de pruebas:
BLOG DE PRUEBAS
En el próximo tutorial os hablare de personalizar el titulo y la fecha, pero bueno, este ha sido el de esta semana, y si necesitáis algún tutorial en concreto no dudéis en decírmelo.

Volver a la Portada de Logo Paperblog