Postagens Vanessa S.
Biografia do Autor do post no rodapé
Depois que eu lancei o novo layout do Universo Sombrio, alguns leitores me enviarem como “sugestões de artigos” um pedido para que eu ensinasse a colocar uma pequena Biografia do autor do post no rodapé.
Pois bem, hoje você vai aprender como incluir um pequeno texto descrevendo o autor da postagem que aparecerá de forma automática, e pode ser implementado em blogs que possuem apenas um autor, ou em blogs que possuem diversos autores.
Neste hack, a pequena biografia aparecerá de acordo com o autor do post publicado, ou seja, cada autor que publicar uma postagem terá sua biografia apresentada no rodapé do post em questão.
Para esta implementação será necessário a incorporação de algumas linhas de código no HTML e inserção de CSS em seu template.
1º passo – Aplicar estilos CSS:
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: (edite os campos destacados)
.bio-autor{
margin:10px 2px 20px 2px;
padding:5px 0 15px;
border-top: 1px dotted #000; ---/* edite cor da borda */
border-bottom: 1px dotted #000; ---/* edite cor da borda */
}
.autor-avatar{
float:left;
margin:5px;
}
.autor-text{
color:#494949; ---/* edite cor da fonte */
font-style:none;
font-size:12px; ---/* tamanho da fonte do texto */
text-transform:none;
padding:5px;
margin-left:5px;
}
.autor-text p{
padding:0 auto;
margin: 0 auto;
text-align: justify;
}
.autor-text h3{
text-transform:none;
font-size:17px; ---/* Tamanho da fonte do título */
color:#777; ---/* edite cor da fonte */
font-weight:bold;
margin-top:-5px;
}
.autor-text a:link, .autor-text a:visited{
font-size:12px;
text-transform:none;
}
Salve!
2º passo – Incluir o 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='bio-autor'>
<div class='autor-avatar'>
<img alt='Nome do Autor' height='75' src='ENDEREÇO-DA-IMAGEM' width='75'/>
</div>
<div class='autor-text'>
<h3>Sobre o autor</h3><p><b>Nome do Autor</b> Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 3 linhas. Se quiser coloque um link para a página do blog que fala mais sobre o autor.
<a href='LINK'>Leia Mais sobre o autor...</a>
</p>
</div>
</div>
</b:if>
</b:if>
Edite os campos destacados em vermelho, incluindo as informações que se pede e inclua o texto para descrição do autor no local destacado em verde.
[alerta]ATENÇÃO:
No código acima, no campo para incluir o nome do autor, deve ser escrito de forma exata. Deve estar exatamente igual a que aparece nos post. Se for incluido de forma diferente, o html não reconhecerá o nome do autor e o código não vai funcionar, portanto, se você usa algum caracter na sua assinatura, deverá inclui-lo, não esqueça.[/alerta]
No código acima, a biografia do autor irá aparecer apenas nas páginas internas, ficando oculta na home do blog.
Se você quiser que apareça na home também basta apagar a 1ª e a última linha do código (estão destacados em amarelo):
<b:if cond='data:blog.pageType == "item"'>
</b:if>
Como eu citei no inicio do tutorial, este código pode ser utilizado em blogs que possuem vários autores.
Se o seu blog possuem vários autores, basta copiar e colar o código acima quantas vezes quiser.
Use este código para cada autor no seu blog, colando-o pela quantidade de vezes referentes a quantidade de autores que seu blog possui, mas não esqueça que você deve editar o nome do autor, imagem e texto, para que cada autor tenha sua biografia no final dos artigos que ele publicar.
1) Utilize uma imagem com tamanho máximo de 75px e largura máxima de 75px, para cada avatar do autor.
2) Recomendo que o texto com a biografia do autor não tenha mais que 3 linhas, para que não fique extenso demais.
3) Se quiser coloque um link para a página do blog que fala mais sobre o autor.
Lembrando que usei como referência o código do Template Minima.
Muito legal a tutorial e funciona bem. Só fiquei com uma duvida, tem como incluir esse “Autor já escreveu —– posts.”, igual tem na sua bio? Será que fiz algo errado, porque no meu blog não aparece.
Esse que eu uso aqui é um plugin para wordpress. Este contador faz parte do plugin. Para blogger, infelizmente ainda não tem.
Eu preciso de um box personalizado para colocar em uma página estática…como posso fazer? alguma dica legal? 🙂
Vanessa, neste código tem uma barra que fica por cima. Como que faz para colocar uma barra embaixo também?
Ficou certinho como eu queria… muito obrigada.
segui seus passo para fazer mudanças no meu blog. ficaram excelentes….porém na última vez algo deu errado. As paginas do blog não aparecem.. o Titulo aparace mais as postagem não, e no editor de postagem elas aparecem normalmente o que faço.. agradeço..
Olá Vanessa!
Primeiramente parabenizar pelo excelente conteúdo aqui apresentado.
Bem assim como o Janilton também estou com o mesmo problema, funcionou direitinho aqui pra mim o código, porém quando vou compartilhar no facebook a miniatura aparece com a imagem corretamente assim como o título da minhas postagem mas na descrição da mesma ao invés de apresentar uma prévia do conteúdo aparece a minha biografia, alguma ideia de como solucionar o problema?
Parece que esse é um problema no próprio código do facebook. Esse problema acontece com vários blogs, inclusive nos meus. Infelizmente eu não sei como corrigir isso, mas se caso eu descobrir ou souber algo, eu publico pra vcs.
Outra coisa que acaba por me chamar a atenção é que o problema não é no código da biografia, mas alguma incompatibilidade acontece, pois quando o código se encontra sem a bio, o link do facebook aparece corretamente, agora quando está com a bio, o que aparece é a mesma na descrição da miniatura, de alguma maneira quando aplicamos o código na template ele acaba por se tornar a prioridade na leitura do HTML, ao menos é a unica explicação que imagino que possa existir, mas enfim continuo minha pesquisa para solução desse problema.
Estou no terceiro dia do desenvolvimento do meu blog, mas to começando a deixar o layout com minha cara, só falta mesmo é alinhar essa assinatura pra que eu possa fazer a divulgação do blog nas redes e onde mais eu quiser divulgar!
um abraço Vanessa
Oi Vanessa!
Acredito que encontrei o porque de ao compartilhar aparecer a biografia e não o conteúdo, o motivo é bem tosco em princípio, porém no meu caso foi o que aconteceu, vamos lá.
Quando eu criei o http://repertorionerd.blogspot.com eu já planejei tudo que eu gostaria de ter configurado no mesmo, ou seja não sai fazendo publicações parti para a configuração primordialmente, quando eu inseri minha biografia eu possuía apenas 5 posts publicados, deixei de lado já que não encontrava a solução mas quando passei das minhas 10 postagens resolvi testar no facebook se iria funcionar, naquela de descargo de consciência e no final das contas funcionou certinho, então acredito que o problema com a biografia acontece quando o site não está suficientemente alimentado, então como dica deixo que se acaso estiver fazendo isso tentem aumentar o conteúdo do site/blog pra no minimo 10 postagens e experimentem compartilhar após isso. O porque de isso acontecer ainda não sei, mas ao menos no meu caso foi como aconteceu!
Abraço!
Excelente dica funcionou direitinho, só estou com dificuldade para implantar um background com uma coloração diferente, esta dando incompatibilidade com alguns browsers. Se possível da uma força aê, grato!…
Essa caixa da biografia do autor está dando problema, pois quando a postagem é enviada para a rede social facebook, aparece a biografia do autor e não da postagem. Vc tem uma resposta para essa pergunta?
Olá!
Olha, eu coloquei essa caixa da biografia do autor no rodapé da postagem, mas estou com problema em enviar a postagem para o facebook. Ao enviar a postagem através do botão "curtir" para o facebook aparece a descrição do autor e não a da postagem. Aparece o título da postagem, mas com a descrição do autor.Como faço para ENVIAR para o facebook sem que apareça a descrição do autor? Help please! Abraços.
parabens vc consegui sempre.
aah eu consegui 😀
mas tem como tirar aquela divisória ali?
beijos :*
Oi, eu tentei fazer isso num blog com mais de um autor. mas, apareceram duas biografias. a minha [adm. do blog] e do outro autor…=/
Qual deve ser o problema?
Mas um belo artigo Clau!
bem, eu queria deixar aqui uma dica,(como sempre eu deixando comentários extensos -.-)
caso aconteça de você colocar o código que a Clau disponibilizou e ao visualizar o template, você ver que não mostrou nada, faça o seguinte:
No inicio do artigo a Clau fala que você deve buscar a tag: div class = post-footer
e colar o código abaixo dessa linha de comando…
pois bem, em certos templates em sua grande maioria templates do novo blogger, acontece de esse código não funcionar… então pegue o código que a Clau disponibilizou aqui e ao invés de colar abaixo da linha de comando:
div class = post-footer
cole acima dessa linha de comando.
exemplificando ficará assim:
—- código disponibilizado —-
div class = post-footer
Obs: não esqueça de colocar os '' e <>, pois nos comentários não seria permitido eu colocar todo o código da linha de comando, mas siga o artigo que você irá entender o que estou dizendo.
Olá clau boa tarde, você ja me ajudou muito em outros assuntos e agora estou personalizando meu blog com esse elemento que é a biografia do autor abaixo do post no blog. Minha pergunta clau é a seguinte, se tem como colocar a biografia abaixo do post mas uma biografia que mude conforme o postador. Ex. Eu postei aparece minha biografia, um amigo meu postou apararece a biografia dele. Nao sei se tem como fazer isso, se tiver tem como criar um tutorial para me ensinar como é que se faz? Muito obrigado desde ja
Sucesso
Clau,
Descobri o que era e isso é muito importante para vc tbm incluir em sua página.
É necessário que o Autor autorize compartilhar o seu perfil para que funcione, caso contrário não aparecerá!
Eu tenho uns autores em que não consigo visualizar o perfil anteriormente e desses não consegui. Testando com outros autores que autorizam, o código funciona perfeitamente.
NOTA: Dupliquei apenas o código HTML, pois o CSS é somente uma vez mesmo! VLW!!!!
Oi Clau,
Eu até consegui que o código funcionasse pra mim, mas não estou conseguindo quando se é pra adicionar o código para os meus demais autores.
O código CSS deve ser duplicado também? Qual o procedimento correto? Eu apenas dupliquei o código HTML substituindo os nomes dos autores de a devida atenção, mas ainda não aparece
obs: Meu template é mínima!
não consegui, faz video aula 🙂 por favor
Jack Moore
é só seguir este tutorial e editar as partes dos trechos de acordo com seu gosto.
Clau, como faço pra ter uma bio igual a sua aqui do Mundo Blogger (com plano de fundo e tudo mais)?
Parabéns pelo trabalho, o Mundo Blogger é de long o melhor blog de tutoriais que existe 🙂
Victória Andressa
Lamento,mas não tenho como te ajudar. Sugiro que vc tente entrar em contato com o desenvolvedor do template.
Olá Clau, primeiramente parabéns pelo incrível trabalho, eu não saberia metade do que sei hoje de html, css ou blog se não fosse por você.
Comcei a usar um template disponibilizado por Chica Blogger (chamado Dark Edition). O html é todo certinho, direitinho e bem fácil. Somente tem um problema: Eu não consigo colocar nada no post-footer, seja o line-1, line-2 ou line-3. Eu coloco os códigos como no passo-a-passo, tudo certo, mas depois que salvo e vou ver não aparece NADA lá. Acredito que tenha algum código no template bloqueando a colocação de alguma coisa no footer. Já tentei colocar arquivos relacionados, caixinha sobre a licença de cópia do blog, biografia do autor e nada. Simplesmente não aparece.
Muito obrigada desde já!
Diego Monutti
Tem sim. Sugiro que vc leia o item "Adicionar elementos na linha abaixo do Título", deste artigo:
Escolhendo o local para instalar elementos na área dos artigos
Oi Clau.
Tenho uma dúvida. Teria como colocar a biografia logo abaixo do título do post ao invés de colocar no rodapé?
Parabéns pelo blog. Já segui muitas dicas daqui. Excelente trabalho.
Beijos.
Blog bem feitooo!É isso ai Clau!!!
catablogandosaberes
Obrigada pelo comentário..rs
Nossa eu fico feliz em saber q vc vem sempre aqui *_*
Oi, Clau
Deveria ter um aviso no cabeçalho do blog: O Mundo Blogger causa dependência. Use com moderação. rs
Impressionante! Não consigo sair do blog. A cada post quero ler mais e mais e seguir aprendendo.
Quanto à dica, consegui fazer e retirar o que tinha no meu blog. Mas, dessa vez não consegui colocar as bordas. Outra hora olho com mais calma pra ver onde errei.
Bjs
@alberodoro:
Obrigada pelo comentário =P
Adorei seu blog, parabéns pela qualidade dos posts e o capricho nos detalhes.
Com certeza vou voltar sempre.
Abraço!
@Jana Barreto:
Eu nunca tentei e nem testei isso q vc sugeriu..Não sei informar como fazer…
Oi, Clau!
É Jana de novo.
Não me mate, mas acabei encontrando um tutorial sobre isso, não sei é se dá certo. De qualquer maneira, mantenho a sugestão que mandei pelo formulário, pq sempre entendo melhor o que vc explica =]
Obrigada, não aceita eese tbm!!!
Olá, Clau! Sou eu de novo…
Então, eu tava pensando se tem como modificar esse código que você mostrou pra mostrar uma mensagem de acordo com um marcador específico, entende? Já vi em alguns blogs, mas acredito que são WordPress. 🙁 Será que mudando post.autor por post.label funciona? Vou testar, mas provavelmente não funciona… Se possivel, posta alguma coisa sobre isso?
Beijão =*
Tem como mudar a cor do link?
Ta com uma cor feia lá no meu blog
Ja tentei na base do "" mas nem funfou…
Por favor
🙂
Isso me ajudou bastante, obrigado!
@karatuca:
É uma questão de vc tentar, acho que pode dar certo sim, eu não tenho certeza pq nunca tentei usar dessa forma, somente de forma completa. Mas tentar e testar não custa nada não é? Não se esqueça de fazer backup do seu template antes de tentar instalar qualquer recurso.
se colocar apenas a parte do código referente a imagem aparecerá só a imagem ou ele só funciona completo?
@Mary:
é só colar a 1ª condicional no início do código e depois colar o "/b:if" no final do código…não tem erro…O.o
Olá!
Eu fiz td como vc mandou e não deu certo =/ Sou uma anta amiga. Vou deixar do jeito q ta. Vlw pela ajuda. Bjinhos flor.
@Mary:
Já inclui no tutorial a condicional que vc deve usar para ocultar a biografia na home. Acrescenta a condicional ao código, que vai dar certo.
Bjos.
Oi amiga! To com um pequeno problema =/ Eu fiz tudo como vc explicou(eu acho) só q na Home aparece as postagens resumidas mas a biografia aparece e eu queria q ficasse igual no seu blog Universo Sombrio, q só fosse possivel ver qnd clicasse na postagem. Oq tenho q fazer? Bjinhos flor