Cambiar de lugar los datos del inferior de las entradas

Cambiar de lugar datos del post-footer

7 de julio de 2010 Publicado por El Potro , 435 comentarios ,

Las plantillas por lo general tienen los datos del post-footer justo ahí, en el post-footer, es decir, debajo de las entradas. Estos datos son las etiquetas, el autor, la hora, el número de comentarios, etc.

Muchos me preguntan cómo poner esos datos debajo del título de la entrada, así que vamos a ver cómo mover de lugar estos datos. Lo único que haremos es cortar y pegar; nada del otro mundo, un proceso que no nos deberá quitar mucho tiempo, sólo debemos tener cuidado de cortar el código correcto sin omitir o "comernos" algún caracter, de lo contrario aparecerán errores que no dejarán guardar la plantilla.

Primero entra en Diseño | Edición de HTML marca la casilla Expandir plantillas de artilugios y busca esta línea:

<div class='post-footer'>

Debajo de ella estarán los códigos que vamos a trasladar, te recomiendo que lo hagas uno por uno, y por cada movimiento que hagas le des Vista previa para verificar que lo has hecho correctamente.

En todos los casos vamos a cortar los siguientes códigos y pegarlos debajo de esta línea:

<div class='post-header-line-1'>

Ahora sí, vamos a cortar estos códigos y pegarlos debajo de la línea que acabamos de mencionar.


Para mover el Autor

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Para mover 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' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Para mover las Etiquetas

<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Para mover el Link de comentarios

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
</b:if>
</span>

Para mover el icono de Envío de entradas

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='//www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

Para mover la opción de Enlaces a esta entrada

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>

En algunos casos es posible que estos datos queden muy pegados al cuerpo de la entrada, si es así entonces agrega debajo del último código que pegues esto:

<br />

O esto

<hr />

El primero es un salto de línea, el segundo es una línea que dividirá estos datos de la entrada.

También puedes poner un caracter especial que divida los datos entre cada uno tal como se ve en mi blog, para hacerlo sólo agrega después de cada código cualquier caracter que te guste, por ejemplo este |

O bien, puedes poner un icono delante de cada código, sólo agrega esto al inicio de cada código que agregues:

<img src='URL del icono' border='0' />

Si en lugar de mover los datos quisieras recuperar alguno que no tengas o que hayas eliminado anteriormente sólo agrega el código que le corresponde y listo.

También puedes darle un poco de estilo a estos datos como un color de fondo, un borde, etc.
Sólo pega antes de ]]></b:skin> esto:

.post-header-line-1 {
background:#F5F6CE;
border:1px solid #eee;
font-style:italic;
}

O si no ves ningún cambio entonces agrega esto:

.post-header {
background:#F5F6CE;
border:1px solid #eee;
font-style:italic;
}

Ahí puedes agregar todos los estilos que desees, la forma como lo personalices quedará a tu creatividad.