Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





5 may. 2010

Como mostrar la foto del autor en Blogger

Mostrar la foto del autor en cada post

Uno de los trucos más interesantes para tu blog puede ser el de insertar una foto o imagen del autor del post o entrada al inicio o al final del artículo.

Este truco logra que el lector sienta más confianza hacia el blog, al ver una fotografía, por más que sea pequeña, de una persona.

Si bien sabemos que las imágenes en los comentarios y el blog, como cualquier otro elemento, enlentecen la carga del blog en el navegador del visitante, podemos optimizarla a fin de lograr buenos resultados.

Para lograr este truco debemos ir al Escritorio>Diseño>Edición de Html y buscar las siguientes etiquetas:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Seguida de esta última etiqueta debemos agregar el siguiente código:

<div style="clear:both"> <dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'> </dt> <b:if cond='data:comment.authorUrl'> <script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'}); </script> <b:else/> <script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''}); </script> </b:if> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p></p> </dd> <b:else/> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> </b:if> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </div> </b:loop> </dl>

Luego debemos insertar este código antes de la etiqueta </body>

<script type='text/javascript'>
//<![CDATA[
function commentPhotoDo() {
var tag;
for(var i = 0; i < commentPhotoIds.length; i++) {
tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
document.body.appendChild(tag);
}//end for var i in commentPhotoIds
}//end function commentPhotoDo
if(typeof(commentPhotoIds) != "undefined") commentPhotoDo();
//]]>
</script>

Debemos cambiar la url de la imagen (resaltado en rojo) por la de nuestra imagen.

Guardamos los cambios cerramos y listo. Como siempre, antes de cualquier cambio, debemos guardar una copia de seguridad de nuestra plantilla.

Consejos para optimizar nuestra imagen:
  1. No es necesario que nuestra foto o imagen (preferentemente foto no avatar) sea muy grande, quizás de 32x32 píxeles sea suficiente.
  2. Es recomendable utilizar herramientas de diseño de imagen como Gimp o Pixrl (las utilizadas para crear logos) para reducir la calidad de la imagen.
  3. Nuestra foto debe ir acorde al blog: si es un informativo la foto deberá ser bastante formal. Si es un blog personal, la informalidad se hará más notoria.


Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)

1 comentarios :

  1. Funciona este código para un solo autor o puede ser para varios? En nuestro blog somos 3 personas, y quisieramos que apareciera la imagen de c/u en el post correspondiente.

    Gracias.

    ResponderEliminar

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.