De perfiles

Cuando hablamos de perfil enseguida nos viene a la mente la imagen que nos representa en Blogger con un enlace que dice algo así como "Visita mi perfil" y eso si que es el perfil ese espacio que dice todo lo que nosotros permitimos que diga.

Pero, no tenemos por qué mostrar la imagen del perfil tal y como Blogger dispone en un gadget ni tiene por qué ser la misma imagen que mostramos en el avatar de comentarios, podemos hacer cualquier cosa y eso incluye mostrar una imagen con el texto que nosotros queremos mostrar y enlazarlo a cualquier sitio ya sea el perfil, escritorio o una breve descripción o incluso añadir ahí mismo los iconos a redes sociales.

Es algo así a lo que yo tengo añadido en el footer o lo que añadimos en su día para la información de autor en las entradas. De eso trata la consulta y ahí va una solución.

En plantilla y justo antes de ]]></b:skin> añadimos los estilos.

#deperfiles {
 color: #434040;
 font-family: Georgia,serif;
 font-size: 12px;
 line-height: 1.7;
 margin: 40px 30px 0;
 text-shadow: 0 1px 1px #ccc;
 text-align: justify;
}
#deperfiles img {
border: 3px solid #ffffff;
 border-radius: 2px 2px 2px 2px;
 box-shadow: 1px 1px 1px #333;
 border-radius: 100px 100px 100px 100px;
 float: left;
 margin: 0 25px 5px 0;
 width: 95px;
 opacity:0.9;
}
#deperfiles a:hover img {
opacity: 0.7;
}

Después editamos un nuevo gadget de HTML y en su interior añadimos lo siguiente:

<div id="deperfiles">
<a href="url-enlace"target="_blank">
<img alt='' src='url-imagen'height='95' width='95' /></a> 
<h2>Título</h2>
Texto o información
<div class="clear">
</div></div>

Tendremos algo así: