"Acerca del autor" Información del autor al final de cada entrada en Blogger


Esta es una de las tantas ventajas que Wordpress tiene ante Blogger, es decir, la posibilidad de incluir información del autor al final de cada entrada, el clásico "Acerca del autor", de manera que los lectores sepan quién redacta cada artículo y sepan más a cerca de él. Antes de nada, gracias a CiudadBlogger por el truco.

Para conseguir instalar este truco en nuestro blog de Blogger deberemos seguir los siguientes pasos:

1) Debemos ir a diseño/Edición de HTML, expandimos artilugios, y buscamos el siguiente código para eliminarlo:


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

2) ya hecho esto, buscamos lo siguiente:
 
<div class='post-footer'>
y justo debajo de él pegamos este código:


<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>Aquí escribimos una breve descripción del autor.</p>

</div>

Lo que está en verde (URL del Avatar) es donde debemos agregar la dirección de la imágen a utilizar, recuerda que la dirección debe terminar como imagen, ya sea .jpg , .gif, .png, etc. Y en la parte Azul, debemos redactar una breve descripción del autor, ya sea sus otros pasatiempos, otros blogs o webs en donde escriba, etc.

3) Finalmente debemos agregar los estilos, esto es la apariencia final que obtendrá el recuadro.


.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;
}
Lo que está en color rojo es lo que podemos modificar a nuestro antojo para ir modificando la apariencia. Podemos probar revisando la vista previa hasta obtener lo que queramos.

El resultado sería algo así:


¿Pero qué pasa si hay más autores en nuestro blog?
El procedimiento es similar, pero cambian los códigos, es decir a contar desde el paso 2, pegamos el siguiente código:


<div class='acercadelautor'><b:if cond='data:post.author == "Autor 1"'><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>Aquí escribimos una breve descripción del autor.</p>

</b:if>


<b:if cond='data:post.author == "Autor 2"'><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>Aquí escribimos una breve descripción del autor.</p>

</b:if>

Como vemos, los cambios no son muchos, en caso de haber más autores, se utiliza el mismo código del segundo autor, pero se les cambia las partes de color Rojo. Es decir, en vez de poner "Autor 2", este se cambia por "Autor 3", "Autor 4", y así sucesivamente.

En este caso el resultado tendría este aspecto:

7 comentarios:

  1. Ahora vamos a implementarla! thanks!!!

    ResponderEliminar
  2. genial amigo,tengo un problema es que no se como hacer un sideshow como el que tienes ta web http://www.evangelion-ec.com/ ayuda por fa si quieres me mandas un correo a linuxeroyox@gmail.com

    ResponderEliminar
  3. Hola Yoxter,

    ¡Claro que sí hombre! Te envío una guía completa a tu correo y también te lavo el coche...

    Lee las normas por favor. En Quierocrearunblog hemos explicado varios tipos de "slideshow", si empleas el buscador darás con ellos.

    Un saludo y gracias por tu visita.

    ResponderEliminar
  4. Y, ¿dónde se supone que debemos pegar en el código html el diseño del cuadro?

    ResponderEliminar
  5. Listo, me quedo bien en mi blog, pero tengo una duda. Cómo le hago para que el cuadro de "acerca del autor" no aparezca en las páginas, no me refiero a las entradas, sino a las páginas esas que aparecen en el menú. Porque creo una página, por ejemplo: Acerca del Blog o de contacto y me aparece el cuadro al final como si fuera una entrada, y eso no lo quiero en mis páginas. Y gracias por el tutorial. Saludos.

    ResponderEliminar
  6. Amigo, no somos adivinos para adivinar donde se va a pegar el codigo de diseño del cuadro. Puedes decirnos?

    ResponderEliminar
  7. hola :D
    Soy nuevo en este blog
    Yo implemente esto en mi blog pero con un poco mas de css
    Y bueno para ayudar un poco
    Los codigo de la caja se ponen donde se guardan todos los estilos
    Lo colocan justo antes de
    ]]>

    Y listo ya queda el estilo guardado...
    Bueno si quieren Se pasan por mi blog
    Y miran como quedo y si les gusta les paso el codigo que utilise
    Http://www.loztangel.blogspot.com

    ResponderEliminar