01 febrero 2013

Caja de autor bajo las entradas de blogger

Os voy a enseñar cómo poner una 'caja de autor' debajo de cada entrada donde podremos colocar un avatar una breve información sobre tí e incluso los enlaces de tus redes sociales.

caja autor blogger

1.- Primero vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios ahí buscamos este código ]]></b:skin> y encima colocamos lo siguiente:

#bandaedit {
width: 100px;
height: 99px;
margin-left:-13px;
margin-top:-14px;
background: url(https://lh6.googleusercontent.com/-bFO_U3oEdgY/UQpqU5zYTuI/AAAAAAAAItI/RmVsqbvwmgE/s104/re%2520copffia.png)
no-repeat;
z-index: 7;
position:absolute;
}
.caja {border: #4f5966 solid 3px; width:510px;}/* Color del borde de la caja y ancho */
.caja a:hover {
color: #fff; /* Color del enlace al pasar cursor */
text-decoration: underline;
outline: none;
}
.caja a {
color: #424141; /* Color del enlace estado normal */
text-decoration: none;
outline: none;
}
.autorinfo {
border: #f5f5f5 solid 5px; /* Borde de la imagen */
-moz-border-radius: 74px;
-webkit-border-radius: 74px;
border-radius: 74px;
margin-right:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
float:left; padding:4px;margin-left: 0px;height:80px;
}
.contenido {
font-size:14px; /* Tamaño de letra de Escrito por y Sigueme */
margin-top:-10px;
}
.caja{
background:#9a9999; /* Color interior de la caja */
line-height:1.7em;
float:center;
padding:10px 10px 10px 10px;
margin:0 0 5px 5px;
color:white; /* Color del texto */
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height: 16px;
}
#contenidoimg {
position:absolute;
width: 100px;
height: 99px;
margin-left:65px;
margin-top:20px;
}

2.- Ahora busca esta línea:
<div class='post-footer'>

Y debajo de ella agrega esto:
<b:if cond='data:blog.pageType == "item"'>
<div class='caja'>
<div id='bandaedit'/>
<div id='contenidoimg'/>
<img border='1' class='autorinfo' src='https://lh5.googleusercontent.com/-wEmZIe0gpbg/UQEmSl4VaxI/AAAAAAAAINU/C7F0Oq6AsYs/s128/DSC02216.png'/> <br/>
<div class='contenido'>
Escrito por: <span style='font-family: arial; font-size:18px; '><b><data:post.author/> </b></span>
<p><span style='font-family: arial; font-size:12px; '>Una pequeña descripción sobre tí </span></p>
Sígueme en: <a href='URL de tu Facebook'><b>Facebook</b></a> | <a href='URL de tu Twitter'><b>Twitter</b></a> | <a href='URL de perfil de Google+'><b>Google+</b></a> </div>
</div>
</b:if>

MODIFICACIONES:
Cambia lo que está en color rojo por la URL de tu avatar.
Cambia lo que está en rosa por una pequeña descripción sobre tí
Cambia lo que está en color celeste por la URL de tu Twitter.
Cambia lo que está en color azul por la URL de tu Facebook.
Cambia lo que está en color naranja por la URL de tu Google+.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

18 comentarios

Hola: Es estupenda esta entrada, pero de donde saco una imagen que traiga autora en vez de autor para implementarlo? Muchas gracias

Es indistinto tanto para autor como autora.

Hola, si pongo esto, tengo que poner en cada entrada o solo pongo una vezy me sale una opción para elegir quien es el autor de la entrada y sale sola después es su propia entrada?

Jean, colocandolo te sale automáticamente cada vez que publiques una entrada.
El autor sale automático.

Buenas Antonio, entiendo que hay que realizarlo para cada usuario, o sino saldría siempre el mismo autor, por otro lado para que funcione los demas que publican tienen permisos de autor? no de administradores.

Javi con permisos de autor ya funciona no hace falta que sean administradores.
Si tienes varios autores debes colocar el código para cada uno de ellos de esta forma:

<b:if cond='data:post.author == &quot;<b>nombre del autor</b>&quot;'>
segundo código de la entrada con la informacion del 1 autor
</b:if>

<b:if cond='data:post.author == &quot;<b>nombre del autor</b>&quot;'>
segundo código de la entrada con la informacion del 2 autor
</b:if>

<b:if cond='data:post.author == &quot;<b>nombre del autor</b>&quot;'>
segundo código de la entrada con la informacion del 3 autor
</b:if>

y así susecivamente...

GRACIAS me funciono de maravilla una pregunta se podrá cambiar la forma y el color de la caja .
espero entiendas mi pregunta gracias de ante mano .

Norlan, en el CSS va explicado todo lo que puedes cambiar desde el fondo de la caja hasta el borde. Todo es modificable.

Por ejemplo el fondo de la caja sería buscar esto: .caja{
background:#9a9999; /* Color interior de la caja */, el #9a9999 es el color gris oscuro del fondo, si quieres cambiar colores, puedes usar ésta página: Tabla de colores.

Qué excelente post, ya lo apliqué a mi blog, sólo tengo una duda, cómo le cambio el tamaño pues en mi blog, no se alcanza a leer una palabra de la descripción. Muchas gracias, estaré pendiente.

Edwin, se ve perfectamente, lo que debes es reducir un poco la imagen para que encuadre perfectamente.

Busca: margin-left: 0px;height:80px; y en el height coloca 60 en lugar de 80, haber que tal.

Saludos.

Hola Antonio, pues lo he hecho, pero no me aparece aún al final de mis entradas nada, será que es apartir de un nuevo post que haga? o no tiene nada que ver y debería verse en mis entradas antiguas?
pues revisé bien y he hecho tál y como lo has escrito.
mi blog es: http://edicionpublicitaria.blogspot.com.br/
Muchas gracias por el aporte.

¿no funciona con vistas dinámicas?

Correcto Roux, las plantillas dinámicas estan muy limitadas en cuanto a gadget, solo admiten los propios de blogger.

disculpa este cuadro aparece en cada entrada al inicio del blog?

Jack solo aparece en la pagina de la entrada, no en la portada del blog.

hola amigo, me gusto mucho esta caja, solo me gustaría saber como le hago para colocar FACEBOOK, TWITTER Y GOOGLE + en colores diferentes, como lo tienes tu.mi blog. http://matte23.blogspot.com/

hola amigo, me gusto mucho esta caja, solo me gustaría saber como le hago para colocar FACEBOOK, TWITTER Y GOOGLE + en colores diferentes, como lo tienes tu.mi blog. http://matte23.blogspot.com/

Ramón para ello debes eliminar este trozo <b>Facebook</b> y en su lugar colocar el siguiente:
<b>
<span style='font-family: arial; font-size:14px;color:blue;'>
Facebook
</span>
</b>
donde el blue es azul.
Debes hacer lo mismo con Twitter y Google. (color twitter: color:#18E5D4; color google: color:#A90303;)


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"