7 de enero de 2015

Poner la fecha debajo del titulo de la entrada



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:

<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 */
}


Pueden personalizar lo que esta marcado con rojo

Ver:
Colores HTML
Bordes



No hay comentarios:

Publicar un comentario

Diseño por Blogger Sin Escalones Con la tecnología de Blogger.