Postagens Vanessa S.
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.
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
Interessante… Vou tentar e vamos ver no que vai dar.
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!
perfeito seu tutorial, e o modelo da bio do autor tbm, parabens, e obrigado.
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.
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
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.
Eu adorei esse blog show muitas dicas legais .
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
Testei em um blog teste e funcionou. Quando coloquei o código no meu site não funcionou. O que pode ser?
Não funcionou no meu.
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
Muito obrigado pela dica.
Ficou muito bem no blog da minha esposa.
http://clubedafraldinha.blogspot.com
Obrigado
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
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
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
Não era pra acontecer, vc deve ter alterado alguma coisa que causou esse desalinhamento. O trecho CSS referente aos icones está em
.autorsocialConsegui 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
Muito obrigado. Foi de muita ajuda. Só preciso fazer alguns ajustes de cor, mas ficou perfeito.
Nossa, muito útil e personalizado. Tive que colocar embaixo dos dois “” dai deu certo. Parabéns pelo seu trabalho.
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!
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.
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.
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
Não funcionou
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.
Nossa que estranho!rs
Tá vendo só, como as vezes os códigos variam de template para template. 🙂
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?
Não sei te informar. Vc deve ter feito algo errado, ou pode ser algo relacionado ao seu template.
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!
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.
Fiz tudo direitinho como manda o post, e não consegui =( o que acha que fiz de errado?
Oi, deu certo, gostei bastante, tem como eu trocar algum dessas redes sociais e colocar o skoob no lugar ?
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.
No meu não deu certo! :/ Vanessa pode me ajudar?
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
Interessante, vou adicionar em meu blog.
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
Lamento, mas não sei te dizer.
obrigado assim mesmo vou tentar descobrir nais ficou super legal gostei do resultado dos links para as redes sociais ficou bonito.
Muito Obrigado Eu tava precisando disso thanks ^^
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! =)
Excelente! Muito bem explicado e muito útil.
Parabéns!
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
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,
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.
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!
Gostei muito, muito bom. Eficiente e estiloso!