Adicionar "Caixa de autor" no Blogspot.

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;
}


Passo

Agora enconte o código abaixo.

<data:post.body/>
E cole o código abaixo depois do código a cima.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='author-box'>
    <div class='author-avatar'>
   <img alt='' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXxWW-ntkb63dcge_4mvRtgQMlW01edrdoAZ8xn0M1bUFcGi9960ZjygrR38aqSk5Bd-qvPu5HD1Gm6T2q8TquF5pyBS-mIYYOsDXqsnizODV2CsBmfsZmOJp5r_KMu-0AshkdlZ1b7Z4/s1600/grav.png' width='50'/>
    </div>
    <div class='author-text'>
    <p><h3>About The Author : <a href='#YOUR LINKS HERE' title='Posts by admin'>Your Name</a></h3>
    Write something about yourself here. You can follow him on <a href='http://twitter.com/your link' target='_blank' title='Follow @Twitter'><b>Twitter</b></a> and you can connect with him on <a href='http://www.facebook.com/your link' target='_blank' title='Find me in Facebook'><b>Facebook</b></a><br/>
    </p>
    </div>
    <div class='author-corner'/>
    </div>
    </b:if>


  • Substituia o link da cor Vermelha  pelo  seu link de imagem

  • Substituir Azul com o seu Twitter, Facebook e Links Homepage

  • Substituir Verde  com seu nome e descrição.

  • 0 comentários:

    Postar um comentário