Box com Biografia do autor e Redes Sociais no Blogger

Neste tutorial vou ensinar a inserir um outro modelo de Biografia, incluindo botões para redes sociais, parecido com o plugin que eu utilizo aqui no Mundo Blogger.

O Box com biografia do autor do post que vou compartilhar neste tutorial, não possui apenas um pequeno texto descrevendo o autor da postagem, mas também inclui pequenos botões sociais para que os leitores possam se conectar com o autor nas principais redes sociais como Facebook, Twitter, Google Plus e Linkedin.

No WordPress, podemos simplesmente instalar um plugin para ter esse box no rodapé das postagens, mas no Blogger é necessário incluir no template, códigos css e html manualmente.

[becape] Antes de mais nada, sempre é recomendável que você faça um backup do seu template, antes de fazer quaisquer alterações. [/becape]

Feito isso, vamos ao que interessa.

1. Código CSS:

Acesse o painel do blogger e vá no menu “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag: ]]></b:skin>
e cole o seguinte código logo ACIMA dela:

/* Bio Autor Box */
.autorbox {
    position: relative;
    margin: 20px auto;
    border: 10px solid #CAE3F2;  /*cor da borda do box*/
    padding: 5px;
     -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.autorbox:hover {
    border: 10px solid #E7F2F9;  /*cor da borda do box hover*/
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.autoravatar {
    background: #fff;
    border: 1px solid #ccc9bd;  /*cor da borda do avatar*/
    float: left;
    height: 100px;
    padding: 2px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 4px 0 #d9d9d9;
    -moz-box-shadow: 0 0 4px 0 #d9d9d9;
    box-shadow: 0 0 4px 0 #d9d9d9;
    width: 100px;
}
.autoravatar img {
    height: 100px;
    width: 100px;
}
.autorcontent {
    margin-left: 120px;
}
.autorhead {
    border-bottom: 1px solid #ddd;
    margin-bottom: 12px;
    padding: 0 160px 5px 0;
    position: relative;
}
.autorbox h3 {
    font-family: Arial, Verdana, georgia, serif;
    color: #3399bb; /*cor da fonte do nome do autor*/
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
    margin: 0;
    border: none;
   text-transform:uppercase;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.autorbox h3:hover {
    color: #0b5b94;  /*cor da fonte do nome do autor com mouse em cima*/
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.autorbox h3 a {
    color: #3399bb!important;  /*cor da fonte do nome do autor*/
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.autorbox h3 a:hover {
    color: #0b5b94!important;  /*cor da fonte do nome do autor com mouse em cima*/
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.autorsocial {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 2px;
    right: 0;
}
.autorsocial li {
    float: left;
    margin-right: 4px;
    padding: 0;
}
.autorsocial li a {
 display:block;
 width:32px;
height:32px;
margin:0 2px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRLroWsEf3L24KViLu0uFqaQRWe580pfYjZiF7yxr1iTjJWDQd-HkFb4xbRcD8fM6iRYiFrp9zaixA3FT8dwFAB8mq5zIIhFRrM6y6VOhsRj3TYPzSZipJ5E7DAtUYWI6R6z2yV9p9vyo/s1600/bg_sprites2.png) no-repeat;
text-indent:-9000px;
 position: relative;
 overflow:hidden;
}
.autorsocial li a.autorFacebook {
    background-position: 0 0;
}
.autorsocial li a.autorGooglePlus {
    background-position: 0 -32px;
}
.autorsocial li a.autorTwitter {
    background-position: -64px -32px;
}
.autorsocial li a.autorLinkedin{
 background-position: -64px 0px;
}
.autorsocial li a.autorLinkedin:hover {
background-position: -96px 0px;
}
.autorsocial li a.autorFacebook:hover {
    background-position:-32px 0;
}
.autorsocial li a.autorGooglePlus:hover {
    background-position: -32px -32px;
}
.autorsocial li a.autorTwitter:hover {
    background-position: -96px -32px;
}
.autorbox p.bio {
    font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
    font-size: 12px;
    line-height: 18px;
}

Eu recomendo que você faça download da imagem dos icones e hospede-a no seu próprio blogger, e substitua a url da imagem que está no código, pela url da sua imagem, desta forma, caso eu trnha problema com meu servidor, seu blog não será afetado.

2. Código HTML:

Volte no menu “modelo”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure pela tag:
<div class='post-footer'>

E cole logo ABAIXO dela:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "NOME-DO-AUTOR"'>
<div class='autorbox'>
  <div class='autoravatar'>
    <img alt='NOME-DO-AUTOR' src='URL-DA-IMAGEM'/>
  </div>

  <div class='autorcontent'>
    <div class='autorhead'>
      <h3><a href='AUTOR-LINK'>NOME DO AUTOR</a></h3>

      <ul class='autorsocial'>
         <li><a class='autorFacebook' href='FACEBOOK-LINK' target='_blank' title='Facebook'>Facebook</a></li>

        <li><a class='autorGooglePlus' href='GOOGLEPLUS-LINK' target='_blank' title='GooglePlus'>GooglePlus</a></li>

        <li><a class='autorTwitter' href='TWITTER-LINK' target='_blank' title='Twitter'>Twitter</a></li>

        <li><a class='autorLinkedin' href='LINKEDIN-LINK' target='_blank' title='Linkedin'>Linkedin</a></li>
      </ul>
    </div>

    <p class='bio'>Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 2 linhas. 
<br/><a href='LINK'>Leia Mais sobre o autor</a></p>
  </div>
</div>
</b:if>
</b:if>

Não esqueça de incluir as informações necessárias, como nome do autor, url da imagem avatar e links para redes sociais nos locais que estão destacados.

Na maioria dos templates, a tag div class='post-footer' aparece 2 vezes. Caso no seu esteja assim, cole o código html em ambos.

No trecho para incluir o nome do autor, deve ser escrito exatamente igual a que aparece nos post.
Você pode obter o nome exato, indo no menu "configurações" > "autores do blog". Veja a imagem abaixo:

Caso seu blog tenha vários autores, basta repetir o código html quantas vezes quiser.
Use o código html para cada autor no seu blog, colando-o pela quantidade de vezes referentes a quantidade de autores que seu blog possui, não esquecendo de fazer as alterações necessárias de acordo com as informações de cada autor.