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.