Esta es una de las tantas ventajas que Wordpress tiene ante Blogger, es decir, la posibilidad de incluir información del autor al final de cada entrada, el clásico "Acerca del autor", de manera que los lectores sepan quién redacta cada artículo y sepan más a cerca de él. Antes de nada, gracias a CiudadBlogger por el truco.
Para conseguir instalar este truco en nuestro blog de Blogger deberemos seguir los siguientes pasos:
1) Debemos ir a diseño/Edición de HTML, expandimos artilugios, y buscamos el siguiente código para eliminarlo:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>
2) ya hecho esto, buscamos lo siguiente:
<div class='post-footer'>
y justo debajo de él pegamos este código:
<div class='acercadelautor'>
<img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Aquí escribimos una breve descripción del autor.</p>
</div>
Lo que está en verde (URL del Avatar) es donde debemos agregar la dirección de la imágen a utilizar, recuerda que la dirección debe terminar como imagen, ya sea .jpg , .gif, .png, etc. Y en la parte Azul, debemos redactar una breve descripción del autor, ya sea sus otros pasatiempos, otros blogs o webs en donde escriba, etc.
3) Finalmente debemos agregar los estilos, esto es la apariencia final que obtendrá el recuadro.
.acercadelautor {
background:#EFFBFB; /* Color de fondo */
border:1px solid #ccc; /* Borde */
letter-spacing:normal;
color:#424242; /* Color del texto */
text-transform:none;
font-size:12px; /* Tamaño del texto */
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño de letra del nombre del autor */
padding-left:5px;
}
Lo que está en color rojo es lo que podemos modificar a nuestro antojo para ir modificando la apariencia. Podemos probar revisando la vista previa hasta obtener lo que queramos.
El resultado sería algo así:
¿Pero qué pasa si hay más autores en nuestro blog?
El procedimiento es similar, pero cambian los códigos, es decir a contar desde el paso 2, pegamos el siguiente código:
<div class='acercadelautor'><b:if cond='data:post.author == "Autor 1"'><img border='0' src='URL del avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Aquí escribimos una breve descripción del autor.</p>
</b:if>
<b:if cond='data:post.author == "Autor 2"'><img border='0' src='URL del avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Aquí escribimos una breve descripción del autor.</p>
</b:if>
Como vemos, los cambios no son muchos, en caso de haber más autores, se utiliza el mismo código del segundo autor, pero se les cambia las partes de color Rojo. Es decir, en vez de poner "Autor 2", este se cambia por "Autor 3", "Autor 4", y así sucesivamente.
En este caso el resultado tendría este aspecto:
