A caixa de autor é um recurso que é sempre bom ter em seu blog, não só porque da uma aparência de profissionalismo, mas porque também dá ao leitor a chance de se conectar com o autor e promover a si mesmo em uma ou duas linhas da caixinha.
Vamos ao que interessa
1º Passo
Faça o Login no Blogger
Vá para Design E selecione Editar HTML.
Em seguida, clique Expandir modelos de widgets .
2º Passo
Agora, tecle [CTRL + F] e procure o código abaixo.
]]></b:skin>
E antes do código acima cole este código abaixo.
/*-----Author Box------*/
#author-box{
float:left;
padding:10px;
width:500px; /* Width of Author Box */
background:#E2F3FB;
margin:0 0 0 -30px;
position:relative;
-moz-box-shadow:3px 3px 5px rgba(190, 200, 211, 0.5);
box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
-webkit-box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
z-index: 100; /* the stack order: foreground */
}
.author-corner{
background:url(http://2.bp.blogspot.com/_0s-GnnHKfng/TGaCypFvG8I/AAAAAAAAAa8/
Wn2hgcv7ZAA/s1600/corner.png) no-repeat left top; bottom:-13px;
height:12px;
left:2px;
position:absolute;
width:12px;
}
.author-avatar{
float:left;
margin:0 20px 0 0;
}
.author-avatar img {
border: 3px solid #fff;
}
.author-text{
float:left;
width:350px;
}
.author-text p{
margin: 0;
padding: 0;
}
.author-text h3 {
font-size:17px;
}
3º Passo
Agora enconte o código abaixo.
<data:post.body/>
E cole o código abaixo depois do código a cima.
Leia Mais ►
Vamos ao que interessa
1º Passo
Faça o Login no Blogger
Vá para Design E selecione Editar HTML.
Em seguida, clique Expandir modelos de widgets .
2º Passo
Agora, tecle [CTRL + F] e procure o código abaixo.
]]></b:skin>
E antes do código acima cole este código abaixo.
/*-----Author Box------*/
#author-box{
float:left;
padding:10px;
width:500px; /* Width of Author Box */
background:#E2F3FB;
margin:0 0 0 -30px;
position:relative;
-moz-box-shadow:3px 3px 5px rgba(190, 200, 211, 0.5);
box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
-webkit-box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
z-index: 100; /* the stack order: foreground */
}
.author-corner{
background:url(http://2.bp.blogspot.com/_0s-GnnHKfng/TGaCypFvG8I/AAAAAAAAAa8/
Wn2hgcv7ZAA/s1600/corner.png) no-repeat left top; bottom:-13px;
height:12px;
left:2px;
position:absolute;
width:12px;
}
.author-avatar{
float:left;
margin:0 20px 0 0;
}
.author-avatar img {
border: 3px solid #fff;
}
.author-text{
float:left;
width:350px;
}
.author-text p{
margin: 0;
padding: 0;
}
.author-text h3 {
font-size:17px;
}
3º Passo
Agora enconte o código abaixo.
<data:post.body/>
E cole o código abaixo depois do código a cima.