Mostrar acerca del autor debajo de cada entrada del blog

Si deseas mostrar la sección acerca del autor debajo de cada entrada. Aquí te explico cómo activarlo y personalizarlo a tu gusto.

¡Hola! soy Gabriela de peengler.com. En esta ocasión te compartiré 2 opciones sobre el perfil del autor. Ambos ejemplos se adaptan a cualquier dispositivo e incluye una imagen, el nombre, un párrafo y los botones de redes sociales.

Sin más que decir, ¡Empecemos!

acerca del autor debajo de cada entrada

Clic en la imagen para ver el vídeo ↑ en YouTube

Estilos acerca del autor debajo de cada entrada

Para empezar, debes dirigirte al código de tu plantilla, y luego pegar dentro de la etiqueta <head> la siguiente línea ↓ que trata del FontAwesome. Con esto los iconos de las redes sociales funcionaran.

FONT AWESOME

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Ejemplo #1 Perfil del autor centrado

Para que la sección acerca del autor se vea bien, necesitaras los estilos. Busca en tu código de Blogger ]]></b:skin> y antes de esa línea pegas lo siguiente:


@import url(https://fonts.googleapis.com/css?family=Open+Sans:200);

:root { --color-texto: #000; --color-iconos: #8e5e31; --color-iconos-hover: #462a10; --color-de-fondo: #e4c3a5; --medida-imagen: 115px; } .sobre-el-autor{ margin: 20px 0px; } .box-autor { font-family: 'Open Sans', Arial, sans-serif; position: relative; display: flex;width: 100%; text-align: left; font-size: 16px; background: var(--color-de-fondo); border-radius: 5px; flex-wrap: wrap; margin-top: 50px; } .box-autor *, .box-autor:before, .box-autor:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .box-autor img { max-width: var(--medida-imagen); border-radius: 100px; box-shadow: 0px 5px 9px #00000073; margin: -60px auto 0px; } .box-autor span { position: relative; top: 0; right: -1%; bottom: 0; padding: 16px; width: 95%; overflow: hidden; } .box-autor h3 { margin: 0; font-size: 1.5em; font-weight: 700; padding-bottom: 5px; text-align: center; color: var(--color-texto); } .box-autor p{ margin: 5px 0px; color: var(--color-texto); /* text-align: center; */ } .box-autor .icons { font-size: 1.6rem; text-align: center; } .box-autor .icons a { color: var(--color-iconos); padding-left: 3px; } .box-autor .icons a:hover { color: var(--color-iconos-hover); }

Ejemplo #2 Perfil del autor responsive

Para añadir el ejemplo 2 debes ubicarte en los estilos de la plantilla, en Blogger buscas: ]]></b:skin> y antes de esa línea pegas lo siguiente:


@import url(https://fonts.googleapis.com/css?family=Open+Sans:200);

:root { --color-texto: #fff; --color-iconos: #afafaf; --color-iconos-hover: #fff; --color-de-fondo: #1d1d1d; } .sobre-el-autor{ margin: 20px 0px; } .box-autor { font-family: 'Open Sans', Arial, sans-serif; position: relative; display: flex; width: 100%; text-align: left; font-size: 16px; background: var(--color-de-fondo); border-radius: 5px; flex-wrap: nowrap; } .box-autor *, .box-autor:before, .box-autor:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .box-autor img { max-width: 170px; margin-top: -20px; margin-left: 3%; margin-bottom: 25px; backface-visibility: hidden; vertical-align: top; border-radius: 5px; box-shadow: 0px 5px 9px #00000073; height: 175px; } .box-autor span { position: relative; top: 0; right: -1%; bottom: 0; padding: 16px; width: 73%; overflow: hidden; } .box-autor h3 { margin: 0; font-size: 1.5em; font-weight: 700; padding-bottom: 5px; color: var(--color-texto); } .box-autor p{ margin: 5px 0px; color: var(--color-texto); } .box-autor .icons { font-size: 1.6rem; padding: 2px; } .box-autor .icons a { padding-left: 3px; color: var(--color-iconos); } .box-autor .icons a:hover { color: var(--color-iconos-hover); } @media (max-width: 720px){ .box-autor{ display: flex; flex-wrap: wrap; } .box-autor img{ margin: -20px auto -12px; max-width: 140px; height: auto; } .box-autor h3, .box-autor .icons { text-align: center; margin-top: 15px; } .box-autor span { width: 95%; } }

Podrás modificar el color del texto, fondo y cambiar el tamaño de la imagen.

Recomiendo la siguiente página: HTML Color Picker Para obtener el código de los colores. Si quieres puedes ver el vídeo tutorial para que no tenga ningún problema.

Perfil del autor al final de cada entrada

Solo falta mostrar acerca del autor debajo de cada entrada de tu blog. Para ubicarte al final de tus entradas debes buscar: <data:post.body/>

Nota: Esta línea suele mostrarse varias veces en el código de la plantilla, es por eso que debe identificar la correcta, en el video tutorial explico cómo hacerlo → clic aquí.

Cuando lo encuentre, agregue lo siguiente debajo de esa línea:


<div class="sobre-el-autor">
<div class="box-autor">
<img src="URL-DE-LA-IMAGEN" alt="sobre mi" />
<span>
<h3>NOMBRE DEL AUTOR</h3>
<p>
SOBRE EL AUTOR
</p>
<div class='icons'>
<a href='#' title="Sigueme"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
<a href='#' title="Sigueme"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
<a href='#' title="Sigueme"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</span>
</div>
</div>


Modificar la información sobre el autor

URL-DE-LA-IMAGEN: Por su imagen de perfil. Recomiendo una imagen cuadrada.

NOMBRE DEL AUTOR: Por su nombre.

SOBRE EL AUTOR: Escriba un breve texto sobre ti.

EN REDES SOCIALES: Puedes añadir las redes sociales que quieras, por defecto se muestra: Pinterest, YouTube e Instagram. Recuerde modificar el href=’#‘ por la Url de su cuenta.

Si quiere añadir una red social, solo debe incluir otra línea:


<a href='#' title='Sígueme'>AQUÍ-VA-EL-ICONO</a>

Debe eliminar AQUÍ-VA-EL-ICONO e incluir su icono que lo encontrara en FontAwesome.

⛔ Recomiendo leer:

En conclusión

Espero que le guste los 2 ejemplos sobre acerca del autor y no tenga ningún problema en mostrarlo debajo de cada entrada.

Dime ¿tienes alguna duda? Déjalo en los comentarios. 

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *