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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Para mover el
Link de comentarios
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url +
"#links"'><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.
Un Widget es uno de esos artilugios que habitualmente adornan las barras laterales de los blogs.
