Acerca del autor debajo de cada entrada mejorado

Hace mucho tiempo En la página web del potro de Ciudad Blogger , el nos muestra una estupenda forma de poner una breve biografía del administrador del blog abajo de los posts, me dije así mismo este truco no se queda así XD todavía se pueden poner muchas mas cosas que tal si le ponemos enlaces al facebook y que nos sigan también en twitter, fué ahí entonces que se me antojó ponerle esas dos opciones y dos mas unas cuantas mejoras que mencionaré.
En mi opinión creo que ese script estaba muerto es decir que nadie le había hecho mejoras despues de solo ponerlo y cambiarle los colores nadamas de instalarlo y ya está queda perfecto,bueno no sé si ya se hubo hecho algún cambio LO REPITO NO SE.
Bueno es hora de instalarlo
con su permiso,mejoré un poco el truco,Se tratata de estas características:

• Bordes redondeados
• Còdigo para que puedas poner un enlace a donde quieras
• Enlace a tu Facebook des de un ícono
• Enlace a tu perfil de Twitter desde un ícono

Esas son las características que mejoré.

Ve este ejemplo en el blog de pruebas

Ahora empecemos con la instalación.

1. En tu plantilla expande los artilugios y busca este 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>

Este código es lo que muestra Publicado por: tu nombre, lo eliminamos sinó lo dejamos como está como gusten.
2. buscamos esta linea:
<div class='post-footer'>
Luego justo debajo de ella colocamos este código:

<div class='acercadelautor'>
<img border='0' src='Tu imagen Avatar ' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>PUBLICADO POR</span> <strong><data:post.author/></strong>
<p>Aquí tu breve biografía <strong><a href='Enlace'>Título de tu enlace</a></strong><div align='right'>
<strong style="FONT-SIZE: 12px; COLOR: #804000">SÍGUEME ATRAVÉS DE:</strong> <a href='Aquí tu facebook'><img height='' src='https://lh6.googleusercontent.com/_rQrlOZcWjYs/TXZwsif1HJI/AAAAAAAAAQs/1Uu2kSJShjA/facebook%204.png' width=''/></a><a href='http://twitter.com/usuario'><img height='' src='https://lh5.googleusercontent.com/_rQrlOZcWjYs/TXZwyziXOXI/AAAAAAAAAQw/pjQYw_iHWf0/twiitter%202.png' width=''/></a>
</div></p>
</div>

Cambia lo donde dice aquí tu facebook por la URL de tu perfil y donde dice usuario por tu nombre en twitter.
Bien ya que tienes el escript instalado es hora de darle maquillaje y color CSS,pega este código antes de ]]></b:skin>:

.acercadelautor {
background:#e3e3e3; Es el color de fondo
border:2px solid #444444;-moz-border-radius: 8px;
letter-spacing:normal;
color:#1b1a1a; Es color del texto
text-transform:none;
font:12px Arial; /* Es el Tamaño del texto */
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#2c577f; Es el color del nombre del autor
font-weight:bold;
font-size:13px; Es el Tamaño de la letra del nombre del autor
padding-left:5px;
}

Con eso ya hemos mejorado el script.