17 de abril de 2017

Eliminar el pie de entrada o mover su contenido en Blogger

Eliminar o mover el pie de entrada del blog


¿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.

Editar opciones del post-footer en Blogger


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>


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>


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;
}



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.

Pie de página de Blogger personalizado


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>


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>



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>


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>


Ahora las entradas se muestran así,

Etiquetas bajo el título de la entrada en el blog


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>


Etiquetas y comentarios bajo el título de la entrada en el blog