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.
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;
}
|
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpsGaOXpfXTKGHFoWxGvTHxbE-VxNz8ivl2VE33mz424n9oHnht1p8nBYz-iqN6qjC6QZprCfHwF7aLDRMUritBdTv3_ZZgEqs_turO1VksCUA0KdM2OSaT0c-SRqX4OtZQGVxI9ZeRLi/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>
|
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+.
Publicaciones Relacionadas
trucos blog
