[1] En primer lugar incluimos las modificaciones en la plantilla que se explican en esa entrada si no lo hemos hecho anteriormente.
[2] Una vez tengamos incluidos todos los cambios para distinguir nuestros comentarios del resto, añadimos la llamada a la imagen en el mismo código que habíamos colocado:
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/><img class='firma' src='URL DE LA FIRMA (IMAGEN)'/></p>
</dd>
<b:else/>
Como podéis ver, le hemos dado una clase (class) a la imagen (en el ejemplo "firma") aunque podéis poner cualquier nombre.
[3] Colocamos ahora en el CSS de la plantilla (antes de ]]></b:skin>) el código necesario para controlar la posición de la firma dentro del cuerpo del comentario:
.firma {
display:block;
width: 45px;
height: 28px;
}
En width: pondremos el ancho que tiene nuestra imagen y en height: el alto.
El resultado será entonces algo así:
Para controlar la posición de la firma, añadimos una nueva instrucción en el mismo código anterior:
.firma {
display:block;
width: 45px;
height: 28px;
padding-left: 90%;
}
Tendremos que variar el porcentaje (90% en el ejemplo) según la posición que queramos conseguir para la imagen.
Compartir Enlace
0 comentarios:
Publicar un comentario