Poner la foto del autor en los post o entradas

  • enero 13, 2011

Hoy en trucos para blog, os voy a dejar un post que esta genial para poder poner el autor con su foto o avatar en cada entrada o post, en algo que no tiene blogger en sus gadgets y habr?? que hacerlo manualmente, este post lo saco de una de las mejores paginas para blogeros y su autor el se??or Potro de los mejores maestros en la Red, desde trucosblogs.com damos las gracias a ciudadblogger.com por compartir y ayudar tanto.

Una de las «ventajas» que tiene WordPress es que se puede agregar debajo de cada post una peque??a biograf??a sobre el autor para que los lectores puedan tener m??s informaci??n acerca de qui??n escribe el post, y muchos usuarios de Blogger desear??an poder tenerlo tambi??n en el blog, as?? que vamos a ver c??mo poner un ‘acerca del autor‘ debajo de cada entrada.
En ??l puedes poner tu avatar, una breve informaci??n sobre ti e incluso puedes agregar enlaces sobre otros sitios webs que tengas o de tus redes sociales.


acerca del autor

  1. Primero vamos a Dise??o | Edici??n de HTML y marcamos la casilla Expandir plantillas de artilugiosah?? buscamos este c??digo y lo eliminamos:

    <span class=’post-author vcard’>
    <b:if cond=’data:top.showAuthor’>
    <data:top.authorLabel/>
    <span class=’fn’>
    <data:post.author/>
    </span>
    </b:if>
    </span>

    Esa parte que hemos eliminado es la que muestra Publicado por (nombre del autor), lo hemos quitado porque ya no ser?? necesario con lo que vamos a agregar, pero bien puedes dejarlo si quieres y no pasa nada.

  2. Ahora busca esta l??nea:

    <div class=’post-footer’>

    Y debajo de ella agrega esto:

    <div class=’acercadelautor’>
    <img border=’0′ src=’URL del avatar‘ style=’float:left; margin:0 10px 10px 0;width:80px; height:80px;’/><span style=’font-style:italic; font-size:10px;’>ESCRITO POR</span> <strong><data:post.author/></strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
    </div>

  3. Ah?? cambia lo que est?? en color rojo por la URL de tu avatar. Y agrega en donde est?? el color naranja el texto que quieres mostrar como parte de la informaci??n de tu biograf??a, puedes poner enlaces incluso.
  4. Por ??ltimo antes de ]]></b:skin> pega lo siguiente:

    .acercadelautor {
    background:#EFFBFB; /* Color de fondo */
    border:1px solid #ccc; /* Borde */
    letter-spacing:normal;
    color:#424242; /* Color del texto */
    text-transform:none;
    font-size:12px; /* Tama??o del texto */
    padding:5px;
    margin:10px 0 10px 0;
    }
    .acercadelautor strong {
    color:#1C1C1C; /* Color del nombre del autor */
    font-weight:bold;
    font-size:13px; /* Tama??o de letra del nombre del autor */
    padding-left:5px;
    }

Esos son los estilos que tendr?? el recuadro, puedes hacer los cambios que quieras en las anotaciones que he puesto en color verde.
A partir de este momento ya podr??s verlo en la Vista Previa y probar si tiene los colores que deseas.
En el primer c??digo que hemos agregado est?? marcado en negrita el tama??o de la imagen del avatar, esa puedes modificarla a tu gusto; si agregas poco texto en tu biograf??a se recomienda que hagas el avatar m??s peque??o para que no quede en desproporci??n.
??Y si el blog tiene m??s de un autor?

Si el blog tiene m??s de un autor tambi??n podemos hacer que cada autor tenga el suyo, cada uno con su avatar y su descripci??n correspondiente.

acerca del autor


acerca del autor

En ese caso en lugar de pegar el c??digo del paso 2 pegaremos este otro:

<div class=’acercadelautor’><b:if cond=’data:post.author == &quot;Autor 1&quot;’><img border=’0′ src=’URL del avatar 1‘ style=’float:left; margin:0 10px 10px 0; width:80px; height:80px;’/><span style=’font-style:italic; font-size:10px;’>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</b:if>

<b:if cond=’data:post.author == &quot;Autor 2&quot;’><img border=’0′ src=’URL del avatar 2‘ style=’float:left; margin:0 10px 10px 0; width:80px; height:80px;’/><span style=’font-style:italic; font-size:10px;’>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</b:if>
</div>

El primer fragmento corresponde al primer autor y el segundo al otro autor. De igual modo cambia la URL del avatar y el contenido de la biograf??a.

En donde dice Autor 1 y Autor 2 debes poner el nick de los autores tal como aparece en el blog respetando las may??sculas, min??sculas y espacios, eso es muy importante.
Si quisieras agregar m??s autores s??lo agrega antes de </div> otro fragmento como este:

<b:if cond=’data:post.author == &quot;Autor 3&quot;’><img alt=» border=’0′ src=’URL del avatar 3‘ style=’float:left; margin:0 10px 10px 0; width:80px; height:80px;’/><span style=’font-style:italic; font-size:10px;’>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</b:if>

Como ven el procedimiento es de lo m??s sencillo, no requiere scripts ni nada del otro mundo y el resultado quedar?? tan lindo como ustedes quieran.

Si la imagen la quer??is poner encima del post ser??a as??:

en el paso 2.  tendr??as que buscar este codigo:

div class=’post-header-line-1 

Fuente

No Comments Found