Información acerca del autor en blogger

Hola que tal amigos del blog, les muestro como colocar un cuadro de información acerca del autor del articulo mas amplio y con mejor aspecto que el que muestra por defecto la plataforma blogger (bueno, si se le puede llamar cuadro de información :P), es muy fácil de implementar.


Primero deben de entrar a la opción PLANTILLA y después en EDITAR HTML todo esto en el administrador de blogger.

Ya en el editor, buscamos las siguientes lineas de código.-

<span class='post-author vcard'>
    <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'>
            <data:post.author/>
        </span>
    </b:if>
</span>

Las cuales vamos a reemplazar por las siguientes lineas de código.-

<b:if cond='data:blog.pageType ==  "item" '>
    <div class='acerca'>
        <img src='url_imagen'/>
        Publicado por <data:post.author/>
        <p>Información sobre nosotros</p>
    </div>
</b:if>

No olviden colocar la url de la imagen de su avatar y cambiar la información dentro de las etiquetas <p> y </p>, ya casi terminamos solo falta colocar los estilos para nuestro cuadro, buscamos el siguiente código.-

]]></b:skin>

Y antes del código anterior colocamos el siguiente código.-

.acerca
{
    background: #f9f9f9;
    border: 1px solid #ddd;
    letter-spacing: normal;
    color: #222;
    font-size: 13px;
    padding: 5px;
    margin: 10px 0 10px 0;
}
.acerca img
{
border: none;
float:left;
margin:0 10px 10px 0;
width:80px;
height:80px;
}

Con esto terminamos, el resultado final es este.-

Puedes jugar un poco con el CSS y darle el formato que tu quieras, espero les sirva y cualquier duda con gusto te ayudare, saludos.