Como continuación a la publicación "Eliminar el pie de entrada o mover su contenido" donde he visto las funciones e importancia del post-footer, voy a tratar en esta entrada de personalizar su contenido.
El post-footer que voy a personalizar incluye los siguientes datos:
🔴 Autor
El pie de página se muestra por el momento así,
Personalizar las etiquetas del post-footer
Comienzo aplicando estilo a las etiquetas.
Tras hacer una copia de seguridad, voy al menú de Blogger:
Tema (antes Plantilla) → Editar HTML.
Busco <span class='post-labels'> con CTRL + F.
Me encuentro las líneas de código siguientes (sin la etiqueta <span> en morado que la he añadido posteriormente),
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<span class='estilo-postlabel'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a></span>
<b:if cond='not data:label.isLast'> - </b:if>
</b:loop>
</b:if>
</span>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<span class='estilo-postlabel'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a></span>
<b:if cond='not data:label.isLast'> - </b:if>
</b:loop>
</b:if>
</span>
<b:if cond='not data:label.isLast'> - </b:if>
Normalmente las plantillas de Blogger separan las etiquetas con una coma , pero se puede cambiar este carácter por otro (yo lo he sustituido por un guión entre espacios en blanco) o también por un icono o imagen. En este último caso se elimina la coma y se sustituye
por <img src="dirección URL de la imagen"/>.
Aplico estilo con la etiqueta <span> para definir un contenedor que identifico con el nombre "estilo-postlabel".
Si se quiere cambiar el nombre de "Etiquetas", se elimina <data:postLabelsLabel/> por el nuevo nombre.
En este caso, como voy a incluir un icono con la imagen de una etiqueta, lo cambio por <img src="dirección URL icono etiqueta"/>
Aplicar estilo a las etiquetas del pie de entrada con CSS
Dentro de la edición de la plantilla busco ]]</b:skin> con CTRL+F y pego justo encima las siguientes líneas:
/*-------------------Estilo Etiquetas del pie de entradas-------------------*/
.estilo-postlabel a:link, .estilo-postlabel a:visited { /estilo etiquetas y etiquetas visitadas*/
background-color: #ffd200; /*color fondo*/
color: saddlebrown; /*color letra*/
font-family: 'Verdana', sans-serif; / *fuente letra */
font-size: 12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
font-variant: small-caps; /*letras pequeñas*/
margin: 5px; /*margen*/
padding: 1px 6px; /* distancia entre el texto y el marco */
}
.estilo-postlabel a:hover { /*efecto al pasar el ratón por encima*/
background: gainsboro; /*color de fondo*/
border-bottom: 3px solid black; /*estilo borde inferior*/
color: black; /*color negro*/
text-decoration: none; /*sin decoración heredada*/
}
.post-labels { /*caja contenedora de las etiquetas*/
background: transparent; /*fondo transparente*/
padding: 10px 0px 8px 0px; /*relleno*/
}
.estilo-postlabel a:link, .estilo-postlabel a:visited { /estilo etiquetas y etiquetas visitadas*/
background-color: #ffd200; /*color fondo*/
color: saddlebrown; /*color letra*/
font-family: 'Verdana', sans-serif; / *fuente letra */
font-size: 12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
font-variant: small-caps; /*letras pequeñas*/
margin: 5px; /*margen*/
padding: 1px 6px; /* distancia entre el texto y el marco */
}
.estilo-postlabel a:hover { /*efecto al pasar el ratón por encima*/
background: gainsboro; /*color de fondo*/
border-bottom: 3px solid black; /*estilo borde inferior*/
color: black; /*color negro*/
text-decoration: none; /*sin decoración heredada*/
}
.post-labels { /*caja contenedora de las etiquetas*/
background: transparent; /*fondo transparente*/
padding: 10px 0px 8px 0px; /*relleno*/
}
Ahora el aspecto del pie de entrada es el siguiente,
Personalizar los datos de autor del post-footer
Aplicar estilo a los datos de autor del pie de entrada con CSS
Para personalizar los datos de autor que se muestran en el post-footer añado este código CSS encima de ]]</b:skin>,
/*-------------------Estilo Autor del pie de entradas-------------------*/
.post-author { /*caja datos autor entrada*/
background: transparent; /*fondo transparente*/
color: black; /*color letra*/
font-family: 'arial', sans-serif; /*fuente letra*/
font-size: 12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
padding: 10px 0px 8px 32px; /*relleno entre texto y letras*/
}
.post-author a { /*enlace al perfil del autor*/
color: saddlebrown; /*color letra link*/
font-family: 'ar essence', sans-serif; /*fuente letra*/
font-size: 20px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
letter-spacing:.05em; /*espaciado entre letras*/
padding: 10px 8px 8px 10px; /*relleno entre texto y marco*/
}
.post-author a:hover { /*efecto hover sobre enlace*/
background: orange; /*fondo efecto hover*/
font-size: 22px; /*tamaño letra hover*/
text-decoration: none; /*para no heredar el efecto hover de subrayado*/
padding: 8px 8px 8px 18px; /*relleno hover*/
}
.post-author { /*caja datos autor entrada*/
background: transparent; /*fondo transparente*/
color: black; /*color letra*/
font-family: 'arial', sans-serif; /*fuente letra*/
font-size: 12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
padding: 10px 0px 8px 32px; /*relleno entre texto y letras*/
}
.post-author a { /*enlace al perfil del autor*/
color: saddlebrown; /*color letra link*/
font-family: 'ar essence', sans-serif; /*fuente letra*/
font-size: 20px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
letter-spacing:.05em; /*espaciado entre letras*/
padding: 10px 8px 8px 10px; /*relleno entre texto y marco*/
}
.post-author a:hover { /*efecto hover sobre enlace*/
background: orange; /*fondo efecto hover*/
font-size: 22px; /*tamaño letra hover*/
text-decoration: none; /*para no heredar el efecto hover de subrayado*/
padding: 8px 8px 8px 18px; /*relleno hover*/
}
Ahora el pie de la entrada se muestra así,
y el efecto hover se ve así,
Modificar el texto "Publicado por" del pie de entrada
Si se quiere cambiar el texto o añadir una imagen en lugar de "Publicado por" hay que ir a la edición de la plantilla Tema → Editar HTML y buscar "top.authorLabel" con CTRL + F.
Veremos algo parecido a las siguientes líneas.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
Se elimina <data:top.authorLabel/> y se sustituye por el texto que se desee mostrar. Si se quiere incluir una imagen se cambia por <img src="dirección URL de la imagen"/>
Voy a probar a incluir la imagen del perfil.
Con esta modificación, el pie de página se ve así,
He eliminado <data:top.authorLabel/>
y en su lugar he añadido <img src="dirección URL de la imagen del perfil"/> Publicado por:
Personalizar la fecha del post-footer
Aplicar estilo a la fecha del pie de entrada con CSS
Ahora voy a cambiar el tipo de letra y color de la fecha que se muestra en el pie de entrada añadiendo sobre ]]</b:skin> el siguiente código CSS,
/*-------------------Estilo Fecha del pie de entradas-------------------*/
.post-timestamp { /*caja datos fecha entrada*/
background: linear-gradient(gainsboro 5%, #7a7a0f 55%, lightgrey); /*fondo*/
color: #202E0A; /*color letra*/
font-family: 'Verdana', sans-serif; /*fuente letra*/
font-size: 11px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: normal; /*letra negrilla*/
font-variant: small-caps; /*letras pequeñas*/
padding: 5px 7px; /*distancia entre el texto y el marco*/
border-style: solid; /*estilo del borde*/
border-color: rgba(0,0,0, 0.5); /*color del borde*/
border-width: 1px 1.25px 3.25px 0.5px; /*ancho del borde*/
border-radius: 12px; /*esquinas redondeadas*/
letter-spacing:.02em; /*espaciado entre letras*/
}
.post-timestamp a { /*fecha entrada*/
color: moccasin; /*color letra*/
font-style: italic; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
}
.post-timestamp a:hover { /*efecto hover fecha entrada*/
color: beige; /*color letra*/
font-size:12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
text-decoration: none; /*para no heredar el efecto hover de subrayado*/
}
.post-timestamp { /*caja datos fecha entrada*/
background: linear-gradient(gainsboro 5%, #7a7a0f 55%, lightgrey); /*fondo*/
color: #202E0A; /*color letra*/
font-family: 'Verdana', sans-serif; /*fuente letra*/
font-size: 11px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-weight: normal; /*letra negrilla*/
font-variant: small-caps; /*letras pequeñas*/
padding: 5px 7px; /*distancia entre el texto y el marco*/
border-style: solid; /*estilo del borde*/
border-color: rgba(0,0,0, 0.5); /*color del borde*/
border-width: 1px 1.25px 3.25px 0.5px; /*ancho del borde*/
border-radius: 12px; /*esquinas redondeadas*/
letter-spacing:.02em; /*espaciado entre letras*/
}
.post-timestamp a { /*fecha entrada*/
color: moccasin; /*color letra*/
font-style: italic; /*estilo fuente*/
font-weight: bold; /*letra negrilla*/
}
.post-timestamp a:hover { /*efecto hover fecha entrada*/
color: beige; /*color letra*/
font-size:12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
text-decoration: none; /*para no heredar el efecto hover de subrayado*/
}
El pie de la entrada ha cambiado,
Modificar el texto "En" en la fecha del pie de entrada
Para modificar el texto o añadir una imagen en lugar de
"En" de nuevo tenemos que ir a la edición de la plantilla Tema → Editar
HTML y buscar "top.timestampLabel" con CTRL + F.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
Eliminamos la línea marcada en granate <data:top.timestampLabel/> y la sustituimos por el texto que queramos mostrar o una imagen con <img src="dirección URL de la imagen"/>.
Voy a cambiar "en" para sustituirlo por "Publicado en":
Elimino <data:top.timestampLabel/>
y lo cambio por Publicado <data:top.timestampLabel/>
Como mantengo la palabra "en" no elimino la etiqueta <data/> pero añado la palabra "Publicado" delante.
Con esta modificación, el pie de página se ve así,
Con esta modificación el espacio ocupado por la fecha es mayor y esto ha provocado el desplazamiento de los comentarios a la línea de abajo.
Personalizar los comentarios del post-footer
Aplicar estilo a los comentarios del pie de entrada con CSS
Al igual que en los ejemplos anteriores, para cambiar el tipo de letra y color de los comentarios del pie de entrada hay que añadir sobre ]]</b:skin> código CSS.
/*-------------------Estilo Comentarios del pie de entradas-------------------*/
.post-comment-link { /*caja comentarios entradas*/
background: black; /*fondo negro comentarios*/
padding: 5px 7px; /*distancia entre el texto y el marco*/
border-style: solid; /*estilo del borde*/
border-color: rgba(0,0,0, 0.5); /*color del borde*/
border-width: 1px 1.25px 3.25px 0.5px; /*ancho del borde*/
border-radius: 12px; /*esquinas redondeadas*/
}
.post-comment-link a { /*texto caja comentarios de entradas*/
color: white; /*color letra blanco*/
font-weight: bold; /*letra negrilla*/
font-family: 'Verdana', sans-serif; /*fuente letra*/
font-size: 12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-variant: small-caps; /*letras pequeñas*/
letter-spacing:.02em; /*espaciado entre letras*/
}
.post-comment-link:hover { /* hover caja comentarios entradas*/
background: transparent; /*hover fondo transparente*/
}
.post-comment-link a:hover { /*efecto hover fecha entrada*/
color: black; /*color letra negra para hover*/
font-size:13px; /*tamaño letra para hover*/
font-style: normal; /*estilo fuente normal para hover*/
text-decoration: none; /*para no heredar el efecto hover de subrayado*/
}
.post-comment-link { /*caja comentarios entradas*/
background: black; /*fondo negro comentarios*/
padding: 5px 7px; /*distancia entre el texto y el marco*/
border-style: solid; /*estilo del borde*/
border-color: rgba(0,0,0, 0.5); /*color del borde*/
border-width: 1px 1.25px 3.25px 0.5px; /*ancho del borde*/
border-radius: 12px; /*esquinas redondeadas*/
}
.post-comment-link a { /*texto caja comentarios de entradas*/
color: white; /*color letra blanco*/
font-weight: bold; /*letra negrilla*/
font-family: 'Verdana', sans-serif; /*fuente letra*/
font-size: 12px; /*tamaño letra*/
font-style: normal; /*estilo fuente*/
font-variant: small-caps; /*letras pequeñas*/
letter-spacing:.02em; /*espaciado entre letras*/
}
.post-comment-link:hover { /* hover caja comentarios entradas*/
background: transparent; /*hover fondo transparente*/
}
.post-comment-link a:hover { /*efecto hover fecha entrada*/
color: black; /*color letra negra para hover*/
font-size:13px; /*tamaño letra para hover*/
font-style: normal; /*estilo fuente normal para hover*/
text-decoration: none; /*para no heredar el efecto hover de subrayado*/
}
Éste es el cambio que se ha producido en el pie de la entrada,
Pero me ha ocasionado un problema; los comentarios se muestran personalizados pero debido a que el espacio ocupado por la fecha de publicación es mayor, los datos relacionados con los comentarios están ocupando dos líneas.
Para solucionarlo voy a cambiar la ubicación de los comentarios dentro del pie de la entrada.
Añado un salto de línea <br /> detrás del código relativo a la fecha de publicación,
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
Publicado <data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
<br />
<b:if cond='data:top.showTimestamp'>
Publicado <data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
<br />
Ahora los comentarios se ven en una única línea,
Para que el cuadro de comentarios no quede apoyado sobre las etiquetas, voy a reducir el padding superior e inferior a 2px.
Dentro del código CSS añadido anteriormente, modifico la propiedad de padding.
.post-comment-link { /*caja comentarios entradas*/
background: black; /*fondo negro comentarios*/
padding: 2px 7px; /*distancia entre el texto y el marco*/
border-style: solid; /*estilo del borde*/
border-color: rgba(0,0,0, 0.5); /*color del borde*/
border-width: 1px 1.25px 3.25px 0.5px; /*ancho del borde*/
border-radius: 12px; /*esquinas redondeadas*/
}
background: black; /*fondo negro comentarios*/
padding: 2px 7px; /*distancia entre el texto y el marco*/
border-style: solid; /*estilo del borde*/
border-color: rgba(0,0,0, 0.5); /*color del borde*/
border-width: 1px 1.25px 3.25px 0.5px; /*ancho del borde*/
border-radius: 12px; /*esquinas redondeadas*/
}
Para que la caja que registra el número de comentarios tenga un estilo distinto al cuadro de comentarios (mismo estilo para el hover), añado las siguientes líneas al código CSS.
.post-backlinks { /*caja número de comentarios*/
color: black; /*color letra negro*/
background: #e0e0e0; /*fondo gris*/
margin: 0 0 0 10px; /*margen*/
}
color: black; /*color letra negro*/
background: #e0e0e0; /*fondo gris*/
margin: 0 0 0 10px; /*margen*/
}
Tras estas modificaciones y añadidos, el pie de entrada tiene un aspecto más claro y ordenado.
También se podría solucionar el problema cambiando la posición de los elementos del post footer.
Modificar el texto de los comentarios del pie de entrada
Se puede incluir nuevo texto o añadir una imagen en lugar de "Comentarios:" en Tema → Editar HTML localizando en la plantilla "post.commentLabelFull" con CTRL + F (el primero).
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
<data:post.commentLabelFull/>:
</a>
Se elimina la línea marcada en granate <data:post.commentLabelFull/>: y se sustituye por otro texto o imagen con <img src="dirección URL de la imagen"/>
Por ejemplo, voy a intentar captar la atención del lector con un mensaje directo a fin de lograr que deje un comentario. Para eso cambio "comentarios:" por "¿Te ha parecido interesante? Opina!"
Elimino <data:post.commentLabelFull/>:
y en su lugar añado ¿Te ha parecido interesante? Opina!
Si al lector le ha gustado la entrada hará clic sobre este enlace donde podrá introducir un comentario u opinión.
Cuando se consulta una entrada, en la parte inferior se incluye una caja de formulario en la que el lector puede dejar un comentario. Voy a ver cómo se pueden modificar los dos títulos.
Modificar el mensaje de "No hay comentarios"
Busco de nuevo en la plantilla "post.commentLabelFull" (el segundo). Está incluido dentro de las siguientes líneas,
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
En este caso también se elimina <data:post.commentLabelFull/>: y se cambia por el nuevo título o imagen con <img src="dirección URL de la imagen"/>.
Por ejemplo, voy a cambiar "comentarios:" por "Si te ha gustado por favor deja un comentario. Gracias!"
Elimino <data:post.commentLabelFull/>:
y en su lugar añado Si te ha gustado por favor deja un comentario. Gracias!
Eliminar el mensaje de "No hay comentarios"
Si no queremos que las entradas del blog que no tengan comentarios muestren esta información al lector solamente hay que añadir un condicional a las líneas anteriores.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h4><data:post.commentLabelFull/>:</h4>
</b:if>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h4><data:post.commentLabelFull/>:</h4>
</b:if>
A partir de este momento solo las entradas que sean distintas de cero mostrarán el mensaje.
Modificar el mensaje de "Publicar un comentario en la entrada"
Tenemos que cambiar la etiqueta marcada en rojo por el nuevo texto o imagen.
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Personalizar los datos de localización del post-footer
Aplicar estilo a los datos de localización del pie de entrada con CSS
Haremos igual que en los casos anteriores.
.post-location { /*caja datos de localización*/
.....
}
.post-location a { /*datos de localización*/
.....
}
.post-timestamp a:hover { /*efecto hover datos de localización*/
.....
}
.....
}
.post-location a { /*datos de localización*/
.....
}
.post-timestamp a:hover { /*efecto hover datos de localización*/
.....
}
Modificar el texto "Ubicación" en el pie de entrada
En Tema → Editar HTML se busca "post-location" con CTRL + F.
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
Se elimina la línea marcada en granate <data:postLocationLabel/> y se sustituye por otro texto o por una imagen <img src="dirección URL de la imagen"/>.