Se trata de mover debajo del título de un post los datos que van en el pie de la entrada (post-footer); cambiar de abajo a arriba.
Se trata de elegir que elementos cambiamos o creemos más necesarios...
1. Diseño>Edición de HTML>expandimos artilugios
2. Control+F y buscamos algo similar a <div class='post-header-line-1'> debajo de esa línea trasladaremos los códigos para mostrar los elementos del post-footer debajo de los títulos de las entrada.
3. Control+F y buscamos el código que corresponde al "Publicado por":
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
Lo copiamos - borramos el original - pegamos el que acabamos de copiar debajo de la línea que localizamos antes:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
Mover la hora de publicación a continuación del "Publicado por"
1. Colocamos la hora de publicación de la entrada a continuación del autor que ya habíamos movido antes a debajo del título.
Control+F y buscamos el código que corresponde a la hora:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>
¡Cuidado!, se pone a continuación del código para el "Publicado por" que acabamos de mover:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>
Mover "comentarios" a debajo del "Publicado por" y la hora del post
1. Movemos el enlace de "comentarios" desde el pie de la entrada a debajo del título; a continuación del código colocado de la hora.
- Diseño>Edición de HTML>expandimos artilugios
- Control+F y buscamos el código que corresponde al enlace para dejar comentarios:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
¡Cuidadín!, se coloca a continuación del "Publicado por" - hora de la entrada ya cambiados antes:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
Mover las etiquetas (Paso complicadillo)
1. Diseño>Edición de HTML>expandimos artilugios
- Control+F y buscamos el código que corresponde a las etiquetas bajo la entrada.
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
¡Cuidado!, copiamos - borramos el original - pegamos la copia debajo de los anteriores:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Aclaración:
Si queremos que las etiquetas o los comentarios se muestren en una segunda línea, en lugar de a continuación de los otros elementos, incluiremos su código entre <br> y </br>
Por ejemplo las etiquetas:
<br><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span></br>
Notas:
- ¿Cómo modificar el texto "Publicado por (autor)"? Basta colocar en el CSS de la plantilla, es decir, antes de ]]></b:skin>
.post-author{
font-weight: bold;
color: #27707F;
}
Significa que la fuente está en negrita y el color se modifica.
Cualquier dato de diseño CSS se hace en:
.post-footer {
Si casualmente no estuviera se puede echar mano de una ayuda similar añadir antes de
]]></b:skin>
.post-footer {
border: 1px solid #000000;
margin-bottom:20px;
margin-top:20px;
padding:8px 0 0 8px;
line-height:1.4em;
}
Con este ejemplo colocamos un borde, más la separación entre el contenido y el mismo.
- ¿Cómo se coloca la fuente de la fecha, etiquetas, comentarios... más pequeños? Colocando esta intrucción en el CSS
#post-header-line-1{
Aqui los datos para los cambios
}
