¿Qué es el post-footer o pie de entrada?
El post-footer o pie de entrada es un elemento dentro de la plantilla de Blogger que aparece siempre al final de cada publicación o entrada y que proporciona diversa información útil para el lector sobre el post.
Generalmente muestra de forma predeterminada el autor, fecha y lugar de publicación, comentarios, etiquetas o categorías, edición rápida y botones de redes sociales.
Blogger nos da la posibilidad de configurarlo dentro de Diseño → Gadget de Entradas del blog → Editar, donde podemos selecciónar qué datos queremos incluir en él.
A medida que los blogs se van haciendo más profesionales, los bloggers suelen quitarlo y en su lugar añaden sus propios botones personalizados.
Eliminar el pie de entrada del blog
Si queremos que el pie de entrada del blog tenga un estilo y contenido personal tenemos que eliminar el post-footer predeterminado. Podemos añadir en su lugar un formulario de suscripción o incluir botones de acciones pesonalizadas.
El post-footer se muestra en la página de inicio y también en cada entrada lo que nos permite decidir dónde se muestra y dónde no.
Eliminar el post-footer solo en la página inicio
Dentro del menú Tema (antes Plantilla) → Editar HTML busco ]]</b:skin> con CTRL+F y pego a continuación las siguientes líneas:
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>
.post-footer {
display:none !important;
}
</style>
</b:if>
<style type='text/css'>
.post-footer {
display:none !important;
}
</style>
</b:if>
Si la página que se muestra es igual a la página de Inicio ( == "index" ) no se mostrará el post-footer ( display:none !important; )
Eliminar el post-footer solo para cada entrada
Las líneas a añadir son,
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
.post-footer {
display:none !important;
}
</style>
</b:if>
<style type='text/css'>
.post-footer {
display:none !important;
}
</style>
</b:if>
Si la página que se muestra es distinta a la página de Inicio ( != "index" ) no se mostrará el post-footer ( display:none !important; )
Eliminar el post-footer en todo el blog
Dentro del menú Tema (antes Plantilla) → Editar HTML busco ]]</b:skin> con CTRL+F y pego justo arriba las siguientes líneas:
.post-footer {
display:none !important;
}
display:none !important;
}
Cambiar la posición de los elementos del pie de entrada del blog
Reordenar los elementos dentro del post-footer
Voy a mover de posición los datos que forman parte del pie de entrada de mi blog de prácticas, que incluye el autor, la fecha de publicación, los comentarios y las etiquetas.
Dentro de la plantilla del blog (Tema → Editar HTML) me encuentro con,
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'> "primera línea del post-footer"
<span class='post-author vcard'>...</span> "autor"
<span class='post-timestamp'>...</span> "fecha publicación"
<span class='reaction-buttons'>...</span> "botones de reacción"
<span class='post-icons'>...</span> "iconos redes sociales"
</div>
<div class='post-footer-line post-footer-line-2'> "segunda línea del post-footer"
<span class='post-location'>...</span> "lugar de publicación"
<span class='post-comment-link'>...</span> "comentarios"
<span class='post-backlinks post-comment-link'> ...</span>
"núm. comentarios"
</div>
<div class='post-footer-line post-footer-line-3'> "tercera línea del post-footer"
<span class='post-labels'>...</span> "etiquetas"
</div>
...
</div>
<div class='post-footer-line post-footer-line-1'> "primera línea del post-footer"
<span class='post-author vcard'>...</span> "autor"
<span class='post-timestamp'>...</span> "fecha publicación"
<span class='reaction-buttons'>...</span> "botones de reacción"
<span class='post-icons'>...</span> "iconos redes sociales"
</div>
<div class='post-footer-line post-footer-line-2'> "segunda línea del post-footer"
<span class='post-location'>...</span> "lugar de publicación"
<span class='post-comment-link'>...</span> "comentarios"
<span class='post-backlinks post-comment-link'> ...</span>
"núm. comentarios"
</div>
<div class='post-footer-line post-footer-line-3'> "tercera línea del post-footer"
<span class='post-labels'>...</span> "etiquetas"
</div>
...
</div>
Si por ejemplo quiero mover el cuadro de fecha de publicación 'post-timestamp' a la segunda línea y subir los comentarios 'post-comment-link' y el número de comentarios 'post-backlinks post-comment-link' a la primera línea, tan solo tengo que cortar y pegar las etiquetas <span>..</span> correspondientes y situarlas en la posición deseada.
En este caso la etiqueta <div class='post-footer'> queda así
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'> "primera línea del post-footer"
<span class='post-author vcard'>...</span> "autor"
<span class='post-timestamp'>...</span> "fecha publicación"
<span class='post-comment-link'>...</span> "comentarios"
<span class='post-backlinks post-comment-link'> ...</span>
"núm.comentarios"
<span class='reaction-buttons'>...</span> "botones de reacción"
<span class='post-icons'>...</span> "iconos redes sociales" dentro de <!-- share buttons -->
</div>
<div class='post-footer-line post-footer-line-2'> "segunda línea del post-footer"
<span class='post-timestamp'>...</span> "fecha publicación"
<span class='post-location'>...</span> "lugar de publicación"
</div>
<div class='post-footer-line post-footer-line-3'> "tercera línea del post-footer"
<span class='post-labels'>...</span> "etiquetas"
</div>
...
</div>
<div class='post-footer-line post-footer-line-1'> "primera línea del post-footer"
<span class='post-author vcard'>...</span> "autor"
<span class='post-timestamp'>...</span> "fecha publicación"
<span class='post-comment-link'>...</span> "comentarios"
<span class='post-backlinks post-comment-link'> ...</span>
"núm.comentarios"
<span class='reaction-buttons'>...</span> "botones de reacción"
<span class='post-icons'>...</span> "iconos redes sociales" dentro de <!-- share buttons -->
</div>
<div class='post-footer-line post-footer-line-2'> "segunda línea del post-footer"
<span class='post-timestamp'>...</span> "fecha publicación"
<span class='post-location'>...</span> "lugar de publicación"
</div>
<div class='post-footer-line post-footer-line-3'> "tercera línea del post-footer"
<span class='post-labels'>...</span> "etiquetas"
</div>
...
</div>
Mover los elementos del post-footer a otra sección del blog
Por último voy a ver cómo se puede cambiar la posición de los datos, que por defecto incluye Blogger en el pie de entrada, y trasladarlos a otra zona del blog.
Por ejemplo, si queremos que estos datos se muestren al principio de la entrada y no al final, solamente tendremos que cortar el código de cada uno de estos elementos y pegarlo en la sección del blog en la que queremos mostrarlos, en este caso será bajo el título de la entrada 'post-header-line-1'
Regreso a la etiqueta <div class='post-footer'> en Tema (antes Plantilla) → Editar HTML,
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'> ...</div>
<div class='post-footer-line post-footer-line-2'> ...</div>
<div class='post-footer-line post-footer-line-3'> ...</div>
...
</div>
<div class='post-footer-line post-footer-line-1'> ...</div>
<div class='post-footer-line post-footer-line-2'> ...</div>
<div class='post-footer-line post-footer-line-3'> ...</div>
...
</div>
Voy a mover los comentarios y las etiquetas para que se muestren bajo el título de la entrada. Para evitar pérdida de datos y comprobar que el cambio es correcto, voy a mover los datos uno a uno.
Empiezo por las etiquetas y busco dentro de <div class='post-footer'> la etiqueta span que corresponde a las etiquetas, que es <span class='post-labels'>...</span>.
Corto todo el contenido de esta etiqueta span y lo pego justo a continuación de <div class='post-header-line-1'> (la segunda).
<div class='post-header-line-1'>
<span class='post-labels'>... </span>
</div>
<span class='post-labels'>... </span>
</div>
Ahora las entradas se muestran así,
Para mover los comentarios hago lo mismo.
Dentro de <div
class='post-footer'> localizo la etiqueta span que corresponde a los comentarios <span class='post-comment-link'>...</span> y al número de comentarios <span class='post-backlinks post-comment-link'> ...</span>.
Corto su contenido y lo pego a continuación del span correspondiente a las etiquetas.
<div class='post-header-line-1'>
<span class='post-labels'>... </span>
<span class='post-comment-link'>...</span>
<span class='post-backlinks post-comment-link'> ...</span>
</div>
<span class='post-labels'>... </span>
<span class='post-comment-link'>...</span>
<span class='post-backlinks post-comment-link'> ...</span>
</div>
