- Primero vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios ahí buscamos este código y lo eliminamos:
<span class=’post-author vcard’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/>
<span class=’fn’>
<data:post.author/>
</span>
</b:if>
</span>Esa parte que hemos eliminado es la que muestra Publicado por (nombre del autor), lo
porque ya no será necesario con lo que vamos a agregar, pero bien puedes dejarlo si quieres y no pasa nada. - Ahora busca esta línea:
<div class=’post-footer’>
Y debajo de ella agrega esto:
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div> - Ahí cambia lo que está en color rojo por la URL de tu avatar. Y agrega en donde está el color naranja el texto que quieres mostrar como parte de la información de tu biografía, puedes poner enlaces incluso.
-
Por último antes de ]]> pega lo siguiente:
.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;
}
Si el blog tiene más de un autor también podemos hacer que cada autor tenga el suyo, cada uno con su avatar y su descripción correspondiente.
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</b:if>
</div>
El primer fragmento corresponde al primer autor y el segundo al otro autor. De igual modo cambia la URL del avatar y el contenido de la biografía.
<b:if cond=’data:post.author == "Autor 3"’><img alt=» border=’0′ src=’URL del avatar 3‘ 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</b:if>
Como ven el procedimiento es de lo más sencillo, no requiere scripts ni nada del otro mundo y el resultado quedará tan lindo como ustedes quieran.
vos me leíste la mente jajaja tenia planeado hablar de esto, excelente post hermano. Osea que ahora vamos a aparecer vos, omar y yo en los post será cool.
Muy buen post, he interesante, pero tengo un problema, no puedo ver el código en tu post :S.