Agregar ''Acerca del autor'' en las entradas en Blogger

Agregar ''Acerca del autor'' en las entradas en Blogger

La posibilidad de agregar la información del autor en cada entrada es una de las características que carece blogger, pero no es algo imposible de agregar, y les voy a explicar como hacerlo:


El resultado sería parecido a este:

Para instalar esta descripción al final de nuestras entradas hacemos lo siguiente:

1.Vamos a Edición de HTML y seleccionamos ''Expandir plantillas de artilugios'' y buscamos el siguiente código:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>
 Lo eliminas ya que no va a ser necesario, pero si deseas conservarlo, lo puedes dejar ahí.

2. Ahora buscamos la siguiente línea:
<div class='post-footer'>

y debajo de esta pegamos el siguiente 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>ESCRIBE LO QUE QUIERAS DEL AUTOR AQUÍ</p>
</div>
 Recuerda que donde dice URL del avatar debes pegar el enlace de tu imágen de avatar. y donde dice ESCRIBE LO QUE QUIERAS DEL AUTOR AQUÍ deberás escribir lo que desees.

3. Buscamos la siguiente línea ]]></b:skin> y arriba de esta pegamos el siguiente código:
.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;
}

4.Por último guardas los cambios en tu plantilla.

Opcional:
Si tu Blog tiene a más de un autor el código del paso 2 no lo copies, y pegas el siguiente:

<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>ESCRIBE LO QUE QUIERAS DEL AUTOR 1 AQUÍ</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>ESCRIBE LO QUE QUIERAS DEL AUTOR 2 AQUÍ</p>
</b:if>
</div>

En donde dice Autor 1 y Autor 2, reemplazamos Autor 1 por tu nombre y el Autor 2 por el segundo autor.
Recuerda que los nombres no pueden llevar ninguna diferencia, tienen que ser escritos con exactitud.


Bueno eso ha sido todo, espero que les haya servido, y si quieren agregarme pueden hacerlo.

Recuerda comentar.

.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger