Olá amigos hoje vou ensinar para vocês como colocar abaixo das postagens a descrição do autor da postagem, é algo muito simples mais de muita importância para seu blog, além de deixar seu blog com um aspecto mais profissional, ainda vai indentificar o autor da postagem.
Em primeiro lugar recomendo que faça um back-up toda vez que você for mecher no HTML do seu blog, como mostra na imagem logo abaixo.
Logo em seguida, clique em editar html e expandir modelo como mostra a imagem abaixo.
Aperte CTRL+F e veja a caixinha de busca que abriu logo acima, e digite dentro a seguinte tag, ]]></b:skin> copie o código que está escrito abaixo e cole logo acima da tag indicada.
#post-footer-autor {
width: 100%;
height: 67px; /*Altura do campo autor do post */
background: #071a3a; /* Cor de fundo */
margin: 8px 0px 8px 0px; /* Distancia das margens do campo do autor */
font-family: Geneva, Arial, Helvetica, sans-serif; /* Estilo de Fonte */
}
#autor-img { /* Estilo Avatar */
width: 54px; /* Largura do espaço para avatar */
height: 54px; /* Altura do espaço para avatar */
background: #fff; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Distancia das margens do avatar */
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{ /* Estilo texto da descricao */
font-size: 12px; /* Tamanho da fonte */
padding: 10px; /* Distancias do texto em volta do campo */
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;
}
#autor-sobre a{ /* Estilo texto linkado */
color: #9A9A9A; /* Cor link utilizado dentro do campo */
text-decoration:none; /* Sem algum efeito de destaque no link */
}
#autor-sobre a:hover { /* Estilo texto linkado ao passar mouse */
color: #9A9A9A; /* Cor link ao passar mouse */
text-decoration:underline; /* Sublinhado no texto ao passar mouse */
}
Ajuste as cores e tamanho de acordo com a sua vontade, dependendo da cor do seu blog, ao lado está indicando qual trecho se refere /* exemplo /*.
Agora digite na caixinha de busca o seguinte texto
<div class='post-footer'>
e logo a cima dessa tag cole o código que está escrito logo abaixo.
< b:if cond='data:post.author == "Coloque aqui o nome do autor"'>
< div id='post-footer-autor'>
< div id='autor-img'>
< img src=' Coloque aqui o endereço da imagem ' style='border: 2px solid #ffffff; padding: 0; margin: 0;'/>
< /div>
< div id='autor-sobre'>
< p>Escreva a descrição do autoraqui <a href='http://twitter.com/Nomedeusuario'>Twitter</a> <a href='http://www.facebook.com/Nomedeusuario'>Facebook</a> <a href='http://Aqui_pode_colocar_a_página_Sobre'>Leia Mais Sobre o Autor...</a></p>
< /div>
< /div>
< /b:if>
Obs: recomendo que a imagem seja de tamanho 75px X 75px, 75 de largura width e 75 de altura height.
Se você quiser colocar só os links das redes sociais tudo bem a página sobre é opcional, tem blogs que tem e tem outros que não tem, então use a sua criatividade.
Prontinho agora salve e veja como ficou, seus leitores poderão ter uma noção melhor de quem é o autor das postagens que eles estão lendo.
Confira Todas Postagens de Elielton Queiroz Clique Aqui...
Boa noite!
ResponderExcluirGostaria de saber como dar um espaço entre o avatar e a escrita? Como faço isso? Eu aumentei a borda em volta do avatar, mais o texto está entrando dentro da margem. Há como me ajudar à formar um espaço entre o avatar, a margem e o texto?
Até mais!
Olá Carol.
ExcluirEm primeiro lugar obrigado por visitar nosso blog, a questão do texto está entrando na margem, pode ser que o avatar não tem o mesmo tamanho, tente colocar o avatar do mesmo tamanho e largura das bordas.
@Carol pelo que eu pude ver você almentou as margens mais não aumentou as fontes e fico um pouco estranho procure a seguinte tag
Excluir#autor-sobre p{ /* Estilo texto da descricao */
font-size: 12px; /* Tamanho da fonte */
padding: 10px; /* Distancias do texto em volta do campo */
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;
}
e tente aumentar o tamanho da fonte.
Obrigado e sucesso!
ResponderExcluirEstou montando meu projeto que é novo:
http://www.ajudabloggers.blogspot.com.br/
Gostaria da sua visita por lá meu querido!
Até mais e obrigado.
Me adicione no msn: tvhabbiscada@hotmail.com preciso falar com você Elielton Queiroz!
ExcluirIsso é muito difícil! Será que você não poderia fazer um pra mim? Por favor..
ResponderExcluirMe ajuda ai, preciso tanto da sua ajuda! >.<
Queria saber como é que fica o "Sobre" assim, sobre mim, eu teria que colocar no código uma descrição sobre mim, ou o código é automático, e pega a minha descrição da conta do blogger? E por favor, não tem como fazer um pra mim? =/
@Anonymous Extension obrigado por nos visitar. vou fazer uma postagem explicando outro jeito mais simples de fazer pode aguardar!
Excluiradorei o blog ..
ResponderExcluirParabéns
Valeu Ygor Sthefan continue nos visitando.
Excluirkkkkk' nem da, ta dando erro aki..
ResponderExcluir@Michael
Excluirfiz uma revisão no código e está tudo ok, tem certeza que fez tudo conforme foi ensinado faça uma revisão ou veja este outro tutorial simplificado http://www.escolhidospravencer.com/2012/10/como-colocar-sobre-o-autor-abaixo-das.html