jueves, 13 de enero de 2011

Poner la foto del autor en los post o entradas

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

6 comentarios:

Xabier Villanueva Amadoz dijo...

Hola,

Lo primero de todo es darte las gracias por la entrada, es muy buena y muy bien explicada.

Mi duda, sería la siguiente. Tengo varios blogs y en alguno de ellos tengo añadido el "leer más" (puedes verlo en http://comoserunkiwi.blogspot.com). El caso es que si añado cualquier cosa después del "post-footer" me aparece en la portada y en el artículo.

¿Sabrías guiarme para que únicamente saliera al estar dentro del artículo?

Muchas gracias de antemano!

Morttis dijo...

Gracias por el dato lo acabo de editar en mi plantilla exelente saludos

Morttis dijo...

oyes me quede con una por ejemplo si lo queremos en la parte superior antes de empezar el pots dondedonde trendria que ir saludos

José Duymovich dijo...

Una consulta, eso funciona por separado? Osea cuando el que escribió el post es el autor 1 solamente se muestra el solo? o se muestran ambos incluso cuando uno solo sea el autor. Lo ideal seria que se mostrara solo el que escribio el post no? es posible?

Lo último, es válido para blogspot no?

Saludos y gracias

ledif dijo...

grasias

Mauricio Tapia dijo...

¿Cómo puedo hacer para que la foto del auto no salga en las entradas de blog? Me gustaría saber si la foto puede aparecer sólo cuando ingresamos a un post en particular.

Muachas gracias :D

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones