Para poner la fecha debajo del titulo de la entrada en nuestro blog de Blogger ir a:
Diseño►Edición de HTML ►Control+F y buscamos la etiqueta
<b:if cond='data:post.dateHeader'>
Encontraremos:
<b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>
Eliminamos las tres líneas de código y las pegamos en un lugar seguro ( bloc de notas) para utilizarlas luego.
O para evitar problemas en el caso de querer restaurarlo, no lo eliminamos sino que lo "comentamos" para que no se ejecute:
<!-- <b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if> -->
Ahora buscamos:
Encontraremos dos, el que nos interesa es el segundo:
Recuperamos el primer código que teníamos guardado o comentado y lo pegamos entre </h3> y </b:if>.
Así:
<div class='post-header'>
Encontraremos dos, el que nos interesa es el segundo:
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
Recuperamos el primer código que teníamos guardado o comentado y lo pegamos entre </h3> y </b:if>.
Así:
</h3>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
</b:if>
Comprobamos los cambios en Vista Previa y guardamos.
Personalizar la Fecha en Blogger
1.- Dentro de nuestra plantilla HTML buscamos:
.date-header span {
Si nunca has personalizado tu fecha directamente desde tu plantilla HTML, encontrarás:
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
2.- Elimina todo el código anterior y pega en su lugar el siguiente:
.date-header span {
background-color: #ffffff; /*color de fondo */
font-family: 'Niconne', cursive; /* tipo de fuente*/
font-size: 14px; /* tamaño de la fuente */
font-weight: bold; /* fuente en negrita cambiar a normal*/
color: #8FE1D8; /* color de la fuente */
padding: inherit;
letter-spacing: 0px;
margin: inherit;
text-transform: uppercase; /*texto en mayúscula */
}
h2.date-header{
text-align: center; /* alineación del texto */
line-height:0;
margin-top: 15px !important; /* espacio superior */
border-top: 1px solid #000000; /* color y tipo de borde */
padding-top: 10px !important; /* espacio de separación */
}
Genial
ResponderEliminar