Cómo incluir un cuadro "acerca del autor" en Blogger

Siempre que visitaba un blog y leia algún artículo veía al final del mismo un cuadro con la foto del autor y una descripción acerca suya.

Yo quería incluir algo similar en este blog, pero al parecer ese widget no estaba disponible para Blogger, con lo cual investigando un poco encontré la forma de cómo solucionarlo. Os voy a contar como hacerlo.
-En primer lugar tenemos que ir a la pestaña "Diseño" en blogger y pulsar sobre "editar html" y observaremos el código html de nuestra plantilla de blogger. En este punto yo recomiendo que hagais una copia de seguridad de vuestra plantilla por si algo falla y no sabemos como solucionarlo.
-Mediante "CTRL+F" buscamos una etiqueta en nuestra platilla como la siguiente: "]]></b:skin>"
-Añadimos el código que indico a continuación, justo delante de la etiqueta que hemos buscado:

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

-Salvamos la plantilla y comprobamos que no nos da ningun tipo de error de sintaxis.
-Expandimos los artefactos de la plantilla pulsando el check que aparece encima del cuadro donde aparece el código.
-Buscamos la sentencia mediante "CTRL+F" de: <div class='post-footer-line post-footer-line-1'/>
-Incluimos justo debajo de la línea encontrada el código que aparece a continuación:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://sites.google.com/site/worldjamblog/Home/tuimagen.jpg' width='70'/><b>Acerca del autor</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>INCLUYE TU PERFIL AQUI!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.newbloggingtipz.com/2010/09/add-about-author-box-below-every-blog.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>

Sustituyendo la url de la imagen por la URL donde está ubicada tu imagen para mostar, y los textos de "INCLUYE TU..." por el texto que quiere mostrar a tus lectores.


Y eso es todo, espero que os sea útil el artículo, cualquier comentario es bienvenido!!

By worldjam with No comments