» » » Perfil de Autor debajo de cada post en Blogger

Perfil de Autor debajo de cada post en Blogger



Una parte importante de nuestro blog es darnos a conocer como persona, como blogueros. Para ello, se pueden usar varios elementos, ya sea el perfil de nuestra cuenta en Google+, nuestro perfil en Blogger, etc… Una opción muy interesante y con muy buenos resultados es la Caja de Perfil de Autor al final de nuestras entradas.

Para ello

  • Ir a Plantilla ► Personalizar ►Avanzado ►Añadir CSS,
luego, agrega el siguiente CSS y guardas el cambio en "Aplicar al blog".

.autor img {
margin:0;
border:0;
}
.autor-about {
font-size:16px;
margin:0 auto;
padding:13px;
width:auto;
background:#edf6ff;
min-height:110px;
margin-left: -8px;
margin-bottom: -8px;
margin-top: 15px;
border:1px solid #007ABE;
}
.autor {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.autor-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:13px/1.6em arial,sans-serif;
text-align:justify;
margin-top: -14px;
margin-bottom: -12px;
padding:0;
}


  • Vamos a:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►pegamos

<div class='post-footer'>

 Arriba de esta linea pegar el siguiente código 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='autor-about'>
<div class='autor'><img height='70' src='Url de la imagen del autor' width='80'/> El Autor: CCB </div>
<div class='autor-text'>
<p><strong><font face='verdana'>Sobre el Autor:</font></strong>
<br/> Escribir biografía:  Amante de la informática y la Internet entre muchas otras pasiones... <br/>
Sigueme en <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
</b:if>


Donde esta marcado con rojo colocar la Url que corresponda

Demo



Si te gusta la entrada compártela.

¡Gracias!

2 comentarios:

  1. King Luiso26/2/19

    Es un excelente código que me gustaría a agregarlo a mi blog, pero pasa que el tema ya es mi antiguo, y Blogger ya no lo considera al colocarlo en la plantilla. Ni se diga el CSS. ¿Harás una versión actualizada? Sería estupendo, porque quedaría genial en cualquier blog.

    ResponderEliminar
  2. Alejandro16/4/20

    Hola amigo. Tengo esta plantilla pero los cambios que realizó no se ven en los posts, qué puede ser? Gracias.

    gatocapitalista2.blogspot.com

    ResponderEliminar

▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top