bloque anuncios 728x15

mostrar la foto del autor en Blogger

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.

bloque 336 x 280

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.

0 comentarios :