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!
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:
- Empezar con un Blog Exitoso: 6 Consejos para lograrlo
- 5 Geniales Consejos para la Primera Entrada de un Blog
- Cómo posicionar un artículo del blog en Google con 300 Palabras
- 8 Grupos de Facebook más Populares para Blogger
- Los Colores Elegidos en mi Blog ¿Serán los Correctos?
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.
Únete a la Zona VIP🔥
Descubre todo el contenido que te ofrece y ser parte de mi comunidad.
☑ Puede que también te interese:
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