Fotografía y descripción del autor de las entradas

Veremos como colocar un apartado especial al pie de cada entrada con la fotografía del autor de la entrada y una breve descripción sobre su persona.
Podrá usarse para blogs con solo un autor o para los que publican varios autores, una vez instalado el código, se mostrará de forma automática el apartado que diferencia a cada autor de las entradas.

[1] En nuestro Escritorio de Blogger nos situamos en Edición HTML y marcamos la casila de Expandir las plantillas de artilugios.

[2] Buscamos la etiqueta ]]></b:skin> y justo antes colocamos el CSS para controlar el diseño del apartado:

#post-footer-autor {
width: 100%;
height: 70px; /*Altura del apartado de autor */
background: #669900; /* Color de fondo del apartado */
margin: 8px 0px 8px 0px; /* Margenes del apartado de autor */
border: 2px solid #ccc; /*Borde del apartado*/
}
/* Estilo del avatar */
#autor-avatar {
width: 54px; /* Anchura del espacio para el avatar */
height: 54px; /* Altura del espacio para el avatar */
background: #ccc; /* Color de fondo del avatar */
float: left;
margin: 7px; /* Margenes del avatar */
}
#sobre-autor {
padding-right: 5px;
margin: 0px;
}
/* Estilo del texto de la descripción */
#sobre-autor p{
font-size: 12px; /* Tamaño de la fuente */
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;/* Color del texto */
}
/* Estilo texto de enlace */
#sobre-autor a{
color: #9A9A9A; /* Color del enlace */
text-decoration:none;
}
/* Estilo texto enlace al paso del ratón */
#sobre-autor a:hover {
color: #9A9A9A; /* Color enlace */
text-decoration:none;
}

[3] Localizamos esta etiqueta: <div class='post-footer'>
o en su defecto, esta otra: <div id='post-footer'>

[4] Una vez localicemos una u otra, según aparece en nuestra plantilla, tenemos que colocar justo antes, este código:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == &quot;NOMBRE DEL AUTOR&quot;'>
<div id='post-footer-autor'>
<div id='autor-avatar'>
<img src='URL DE LA IMAGEN DE AUTOR' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='sobre-autor'>
<p>
DESCRIPCION BREVE DE AUTOR
</p>
</div>
</div>
</b:if>
</b:if>

A tener en cuenta:

El código tal cual lo vemos arriba -paso [4]- sería para solo un autor, para que se muestre la descripción de autor en blogs compartidos tendremos que repetir ese código tantas veces como autores publiquen en el blog, después hacemos los cambios correspondientes para cada autor.

El apartado de autor solo será visible en las páginas de entrada, para mostrarlo también en el home del blog, eliminamos la primera línea del código: <b:if cond='data:blog.pageType == "item"'> y el último </b:if> del final.

NOMBRE DEL AUTOR Colocamos aquí el nombre del autor exactamente igual a como aparece en nuestro perfil de Blogger, es decir, el nombre que usamos en nuestra cuenta de Blogger para firmar las entradas.

URL DE LA IMAGEN DE AUTOR Colocamos la url aquí de nuestro avatar, que tendrá aproximadamente unas medidas de 50px por 50px.

DESCRIPCION BREVE DE AUTOR Aquí escribimos una breve descripción sobre el autor, usando la vista previa para calcular que el texto no sobrepase el espacio disponible para el. Se pueden incluir enlaces en el texto si así lo queremos.