Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508711548
Vida do cache: 1508754748
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Postagens

Box com Biografia do autor e Redes Sociais no Blogger

Eu já publiquei um artigo ensinando a incluir uma pequena Biografia do autor do post no rodapé.

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(http://3.bp.blogspot.com/-atvhxnn9xVI/UKXReUQS5UI/AAAAAAAAAM4/b--qqw3W49s/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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

49 Comentários

  1. Fernanda disse:

    Ate agora deu tudo certim + como faço para excluir o outro perfil que o tinha..meu nome continua aparecendo do outro perfil abaixo deste

  2. Talita disse:

    Interessante… Vou tentar e vamos ver no que vai dar.

  3. Raphael disse:

    Muito bom Vanessa, sempre uso esse modelo no blog.
    Só que eu gostaria de inserir mais ícones de redes sociais. Se eu colocar outra imagem de redes sociais, como defino o código “background-position:” de cada uma? Não entendi muito bem examinando o código CSS.
    Obrigado!

  4. Ricardo disse:

    perfeito seu tutorial, e o modelo da bio do autor tbm, parabens, e obrigado.

  5. Washington disse:

    Olá,Parabens pelo seu Blog ! Eu fiz o processo até a parte do código HTML eu coloquei o codigo no template e salvei deu erro ao salvar em uma linha.Poderia me ajudar ? Obrigado.

  6. Ana Maria disse:

    Deu certinho no meu blog, eu ja tinha tentando outros códigos que não tinham dado resultado e esse deu de boa.
    Obrigada por compartilhar com todos.
    Beijinhos

  7. Jhonatan Queiros disse:

    No meu blog não funciona, poderia ajudar a resolver?
    Existe todos os códigos e adicionei tudo corretamente, e ele mesmoa ssim não não funcnioa.

  8. Carlinha disse:

    Eu adorei esse blog show muitas dicas legais .

  9. Vanessa, fiz tudo direitinho e não deu certo!
    Fazem 5 horas que to nessa luta e TODOS os códicos que tento incorporar não funcionam me ajuda por favor!
    http://blogmarcelosantos.com

  10. Testei em um blog teste e funcionou. Quando coloquei o código no meu site não funcionou. O que pode ser?

  11. edivan disse:

    Não funcionou no meu.

  12. Ricardo disse:

    Vanessa, parabéns pelo post. Coloquei em meu blogger corretamente e
    está funcionando muito bem, o único problema é que quando vou compartilhar meu post no facebook ele automaticamente pega a bio do autor referente ao post e fica como descrição. Pode me ajudar? Obrigado.

    • O facebook permite que você altere essa descrição que fica na publicação quando você compartilha um link. Passe o mouse por cima da descrição e caso ela fique amarela é sinal que ela é editável, então é só clicar em cima da descrição e colocar a de seu gosto para o link que estiver compartilhando. Espero ter lhe ajudado.

      Att. Romirys Cavalcante

  13. Benjamin disse:

    Muito obrigado pela dica.
    Ficou muito bem no blog da minha esposa.

    http://clubedafraldinha.blogspot.com

    Obrigado

  14. Obrigada por esse código! Já implementei no meu blog faz tempo e adoro! Só tenho uma dúvida: Acrescentei vários autores novos, sendo que alguns aparecem e outros não. Tem alguma explicação para isso? Nosso blog tem muitos autores.

    Att., Dana

  15. Vanessa me tira uma dúvida por gentileza? É sobre esse gadget de autor box… Eu queria saber se você alterou algo no código dele por que da ultima vez que olhei meu blog os icones de redes sociais ficaram com um efeito muito irado diferente do que tinha antes, eles ficaram tipo iguais ao seus só no meu caso os icones vão pra esquerda e mudam de cor já no seu os icones vão para cima e mudam de cor… Só queria saber se você alterou algo em seu código que influenciou na ótima alteração do meu (mesmo que por acaso)… Você poderia me dizer em qual linha de códigos eu mudo a orientação em que as imagens de icones das redes sociais deslizem? To pensando em fazer com que deslizem pra baixo e não pro lado. Fico grato se me esclarecer essa pequena dúvida… Obrigado por disponibilizar esse código ele melhorou bastante o visual do meu blog nos finais das postagens e com essa mudança no efeito “hover” dos icones sociais que aconteceu depois não sei por que, ficou ainda melhor…

    Att. Romirys Cavalcante

  16. Vanessa adorei seu gadget de bio do autor com redes sociais tanto é que já estou utlizando em meu blog. Estou com um pequeno probleminha.. Os botões de redeses sociais estão um pouco abaixo da linha onde deveriam ficar. Tipo em vez de ficar alinha com meu nome ele desceu um pouquinho e ficou no meio da linha horizontal que separa meu nome da minha biografia.. Queria saber em qual linha do código CSS devo mexer para subir um pouco as imagens dos botões de redes sociais… Fico grato se responder essa minha dúvida…

    Att. Romirys Cavalcante

    • Vanessa disse:

      Não era pra acontecer, vc deve ter alterado alguma coisa que causou esse desalinhamento. O trecho CSS referente aos icones está em .autorsocial

      • Consegui concertar Vanessa, o problema era outro código em CSS que estava interferindo no do autor social… Eu acabei retirando esse que estava interferindo e ficou tudo normal como no exemplo citado aqui no seu blog… Obrigado pela atenção em responder minha pergunta tão rápido… Já acompanho seu blog a alguns anos e essa foi a primeira vez que tive que comentar em seu blog para pedir ajuda sobre algum código seu… Um grande abraço e sucesso com seu blog…

        Att. Romirys Cavalcante

  17. Jota Fagner disse:

    Muito obrigado. Foi de muita ajuda. Só preciso fazer alguns ajustes de cor, mas ficou perfeito.

  18. Ramon disse:

    Nossa, muito útil e personalizado. Tive que colocar embaixo dos dois “” dai deu certo. Parabéns pelo seu trabalho.

  19. Alemão disse:

    Oi Vanessa, parabens pela postagem, mas me ajuda se possivel, não sei o por que a fonte de dentro da caixinha com a minha descrição esta muito grande desproporcional ao meu blog, mas não consigo reduzi-la. Já tentei de varias formas no .autorbox p.bio { e mesmo assim a fonte nem se mexe, coloquei 6, 18, 24, 2 e não aumenta e nem diminui.

    Ajuda eu please.

    Obrigado!

  20. Rafa Fox disse:

    Olá Vanessa. Muito bom esse seu tutorial, não estava conseguindo encontrar em meu blog o local correto para implantar, mais dando uma fuçada consegui. Gostaria apenas de saber se no lugar do botão do Linkedin, daria pra colocar o ícone do youtube, para que eu divulgue o canal do meu blog.

    Beijo.

    • Vanessa disse:

      Oi Rafa, vc pode sim, só que vc vai ter que alterar a imagem com os icones, pois eu criei a imagem apenas com essas redes sociais ai, vc terá que apagar o icone do linkedin e substituir por um icone do youtube.

  21. Boa tarde, Primeiramente eu queria agradecer o blog, que me ajuda muito com as dicas. O codigo e o plugin funciona perfeitamente, so que tive que tirar ele porque estava ficando muito cheio a area da postagem, contando que ja tenho anuncio e os posts relacionados tudo na mesma area, Mais foi muito bom esta dica parabens pelo blog

  22. fasfas disse:

    Não funcionou

  23. Oi Vanessa, tudo bem ? Estava com dificuldades para implementar o CSS, daí troquei o (.) por (#) dos três primeiros comandos e deu certo. Abraço.

  24. Thering disse:

    desculpa esqueci de comentar sobre as redes sociais.
    note que apenas o icone da rede do Linkdin ta fucionando normal
    as outras 3 não aparece o Hover ao passar o mouse e tbm não mudou a imagem das ultimas 3 apenas fica facebok. foi algum problema com o template que utilizou ou é do código em si?

  25. Thering disse:

    Olá, Vanessa. quero agradecer pelo o tutorial. acabei de fazer um blog sobre um Jogo de animes Online e esse tutorial foi muito util.
    só tenho uma dúvida: como faço pra deixar o avatar ficar centralizado com a borda onde fica o avatar?! já tentei ajustar mais nunca fica normal, sempre mostra dois lado braco em vez do avatar ficar full igual na sua imagem.

    se não entendeu o que tentei falar visita o blog aqui: apenas1s.blogspot.com.br

    Ps: esse é o unico problema que to tendo, fora isso está perfeito.
    parabéns pelo o ótimo trabalho de vocês!

  26. Muito obrigado, coloquei e funcionou corretamente, tanto o meu como o do outro autor do meu blog, até mudei as cores para combinar melhor com o meu template.

  27. Miguel Euclides disse:

    Fiz tudo direitinho como manda o post, e não consegui =( o que acha que fiz de errado?

  28. patrick leal disse:

    Oi, deu certo, gostei bastante, tem como eu trocar algum dessas redes sociais e colocar o skoob no lugar ?

    • Vanessa disse:

      Tem sim, só que vc vai ter que criar uma nova imagem dos icones e alterar todo o código html para incluir o link.Essa alteração é por sua própria conta e risco. Recomendo que só faça isso se tiver algum conhecimento melhor em códigos.

  29. No meu não deu certo! :/ Vanessa pode me ajudar?

  30. Vanessa muito seu artigo. Reparei em sua assinatura que você tem o a quantidade de posts que você tem em seu blog (359 artigos), tem como exibir esta informação em biografias do blogger? Se tiver tem como vc criar um tutorial ensinando?

    Obrigado

  31. Anderson disse:

    Interessante, vou adicionar em meu blog.

  32. antonio disse:

    ola bom dia muito bom esse artigo so que eu coloco o link da imagem e não aparece ja refiz tudo e não consigo visualizar a imagem
    o que estou fazendo de errado

  33. Luiz Fernando disse:

    Muito Obrigado Eu tava precisando disso thanks ^^

  34. Mais uma grande ajuda oferecia pelo seu blog! Havia muito tempo que eu procurava por algum modelo realmente interessante para expor minha biografia… Enfim encontrei! =)

  35. Guia Blogger disse:

    Excelente! Muito bem explicado e muito útil.

    Parabéns!

  36. Vanessa,consegui colocar.
    Estava pesquisando há tempos por isso mas sempre dava erro, agora deu certinho não troquei as cores deixei igual a sua postagem.
    Obrigada,valeu!!
    Lindo Domingo para vc,bjs

  37. Juliano Sousa disse:

    Olá Vanessa,

    Acho interessante esse tipo de biografia no fim artigo, eu como leitor gosto de saber um pouco do criador dos blogs que eu acostumo acompanhar e realmente este modelo é excelente, já estou indo trocar minha caixa de biografia para essa, obrigado por compartilhar conosco.

    Abraços,

  38. Relbert disse:

    Muito bom eu já tenho no meu e coloquei manualmente mas irei trocar com este tutorial e assim que trocar avezarei aqui. muito obrigado por compartilhar seus conhecimentos.

  39. Ricardo disse:

    Oi Vanessa, ha tempos que estou procurando uma box de biografia como esta, até ja utilizo uma eu meu blog mas até então não tinha as redessociais. Porem o que realmente eu queria era que tivesse na biografiao contador de postagens como este plugin que você usa em seu blog. É possivel colocar este contador para a plataforma blogger? Até mais!

  40. Gostei muito, muito bom. Eficiente e estiloso!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.