'Acerca del autor ' debajo de cada post

Hola, debido ha que barias personas me han preguntado como poner una descripción del autor en cada post de su blog, me he decidido ha crear un blog donde iré poniendo y explicando en detalles como poner este gadget en su blog.

bueno enpecemos:

1: Primero vamos a Plantilla| Edición de HTML ahí buscamos este código y lo eliminamos:

 
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>

<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>


Esa parte que hemos eliminado es la que muestra Publicado por (nombre del autor), lo hemos quitado porque ya no será necesario con lo que vamos a agregar, pero bien puedes dejarlo si quieres y no pasa nada.

2: Ahora busca esta línea:

<div class='post-footer'>

Y debajo de ella agrega esto:


<b:if cond='data:post.author == "Tu_nombre_de_usuario"'>
<b:if cond='data:blog.pageType == "item"'>
<div class='Uploader' style='background-image: url(IMAGE_DE_FONDO);'>

<img class='Uploader img' src='IMAGE_DE_AVATAR' style='background-image: url(IMAGE_DE_AVATAR); margin-top: 6px;'/>

COMPARTIDO POR:
TU_NOMBRE


 
<hr style='left: -125px; position: relative; width: 290px;'/>
Rango: Rango 
Intereses: Intereses 
Pasatiempos: Pasatiempos 
Animes Preferidos: Animes Preferidos 
Contacto: <a href='TU_URL_DEL_FACEBOOK' style=''>Facebook</a>

</div>
</b:if>
</b:if>

3: Ahí cambia lo que está en color rojo por la URL de tus imagenes. Y agrega en donde está el color azul
lo que te pide.

4: donde dice "Tu_nombre_de_usuario" pones el nombre de usuario.

5: Por último antes de ]]></b:skin> pega lo siguiente:

/*Estilos para las firmas de los autores*/
.Uploader {
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;
border-radius: 15px;
background: #fff;
background-position: top center;
background-repeat: no-repeat;
border: 2px groove threedface;
letter-spacing: normal;
color: #424242;
text-transform: none;
font-size: 12px;
padding: 5px;
margin: 10px 0 10px 0;
}
.Uploader {
line-height: 17px;
}

.Uploader img {
background-color: #FFF;
border: 1px solid #CCC;
padding: 4px;
line-height: 0;
cursor: pointer;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-box-shadow: 0 1px 0 #FFF inset;
-webkit-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.Uploader img {
background-position: center;
-webkit-border-radius: 50px;
-moz-border-radius: 4px;
margin-left: 3px;
margin-right: 8px;
float: left;
height: 80px;
width: 80px;
background-color: #FFF;
border: 1px solid #CCC;
padding: 4px;
line-height: 0;
cursor: pointer;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-box-shadow: 0 1px 0 #FFF inset;
-webkit-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.Uploader {
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;
border-radius: 15px;
background: #fff;
background-position: top center;
background-repeat: no-repeat;
border: 2px groove threedface;
letter-spacing: normal;
color: #424242;
text-transform: none;
font-size: 12px;
padding: 5px;
margin: 10px 0 10px 0;
}

.Uploader img:hover {
background: #44a5e8;
background: -webkit-gradient(linear,left bottom,left top,from(#1d84e4),to(#70c8f3)) #44a5e8;
-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
border: 1px solid #177bc0;
border-bottom-color: #0f4d78;
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
}

.Uploader img:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 4px;
margin-left: 3px;
margin-right: 8px;
float: left;
height: 80px;
width: 80px;
background-color: #FFF;
background-position: center bottom;
border: 1px solid #CCC;
padding: 4px;
line-height: 0;
cursor: pointer;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-box-shadow: 0 1px 0 #FFF inset;
-webkit-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}

Nota:
Si quieres agregar mas usuarios solo tienes que agregar el siguiente código, debajo del anterior.


<b:if cond='data:post.author == "Tu_nombre_de_usuario"'>
<b:if cond='data:blog.pageType == "item"'>
<div class='Uploader' style='background-image: url(IMAGE_DE_FONDO);'>

<img class='Uploader img' src='IMAGE_DE_AVATAR' style='background-image: url(IMAGE_DE_AVATAR); margin-top: 6px;'/>

COMPARTIDO POR:
TU_NOMBRE


 
<hr style='left: -125px; position: relative; width: 290px;'/>
Rango: Rango 
Intereses: Intereses 
Pasatiempos: Pasatiempos 
Animes Preferidos: Animes Preferidos 
Contacto: <a href='TU_URL_DEL_FACEBOOK' style=''>Facebook</a>

</div>
</b:if>
</b:if>

Resultado Final:

Bueno eso seria todo para poder poner una descripción del autor debajo de las entradas.

'Acerca del autor ' debajo de cada post

Navegacion

Busqueda