Uma ideia interessante para todo blog é adicionar, ao final de cada postagem, o perfil do autor que a escreveu, com sua foto e uma breve biografia.
Antes, isso só era possível adicionando o perfil diretamente ao HTML do template.
Agora, isso ficou mais simples: o Blogger permite que isso seja feito de forma bastante simples, utilizando seu perfil no Google+.
Saiba mais sobre esta novidade e como utilizá-la em seu blog!
Introdução
Quem lê um blog normalmente gosta de saber quem escreveu aquele artigo.
Para isso, a biografia ao final de cada postagem é uma excelente ideia (mesmo que você já tenha uma página “Sobre”).
É mais prático e direto do que consultar essa informação em uma página externa.
Para blogs com mais de um autor, isso é ainda mais importante!
Por isso, muitos blogs já fazem uso desse recurso.
Veja abaixo o meu perfil que é exibido ao final dos artigos do Gerenciando Blog:
Com um pouco de criatividade, é possível fazer perfis ainda mais completos, como o que a Samanta, minha parceira aqui no Gerenciando Blog, usa no Vida Real da Sam.
Em seu caso, ela exibe também atalhos para suas redes sociais em seu perfil:
Até agora, isso só podia ser feito no Blogger customizando o HTML do seu template.
Mas, Samanta descobriu que agora isso ficou bem mais simples: apenas marcando uma opção, seu perfil poderá ser rapidamente mostrado em suas postagens.
Há uma vantagem extra em realizar este procedimento: a forma disponibilizada pelo Blogger já permite que sua foto passe a ser mostrada os resultados de seu blog no Google, como mostrei no artigo Foto e nome do autor nos resultados do Google.
Mostrar perfil do autor abaixo da postagem no Blogger
Continuando a aumentar a integração entre seus produtos, agora o Google lhe dá a opção de exibir ao final de suas postagens, a sua foto e sua biografia cadastradas no Google+.
Abaixo está o resultado em um de meus blogs de testes:
Fazer isso é muito simples:
Passo 1 – Certifique-se de você já tenha uma foto e biografia em seu perfil do Google+
O primeiro passo é você ir ao Google+ e avaliar se já estão corretas as informações que você deseja que sejam exibidas em seu perfil. Basta seguir os passos abaixo:
1. Acesse http://plus.google.com e entre com o mesmo usuário e senha que você usa para fazer suas postagens no Blogger.
2. Vá com o mouse até o botão “Início” (na lateral esquerda da página) e clique em “Perfil”.
3. Para alterar a foto que será mostrada em seu perfil, basta clicar sobre ela e selecionar uma nova foto.
4. Depois, clique em “Sobre” no alto da página.
5. A frase que será mostrada em seu perfil é a que está em “Apresentação”, dentro do quadro “História”. Para alterá-la, clique em “Editar” e modifique essa informação.
Dica extra: aproveite que você já está em seu perfil e vá até o quadro “Links”.
Caso seu blog ainda não esteja listado em “Colaborador de:”, clique em “Editar” e coloque seu link lá.
Este procedimento é necessário para sua foto ser exibida nos resultados de seu blog no Google.
IMPORTANTE: Caso haja mais de um autor em seu blog, é necessário realizar este passo para cada um dos perfis.
Passo 2 – Configure seu blog para mostrar seu perfil abaixo das postagens
O próximo passo é configurar o seu blog no Blogger para que seu perfil seja mostrado. Isso é muito simples de ser feito.
1. Acesse http://www.blogger.com.
2. Clique sobre o nome do seu blog.
3. Acesse a área “Layout”.
4. Clique em “Editar” no quadro “Postagens no blog”.
5. Marque a caixa “Mostrar perfil do autor abaixo da postagem” e clique em “Salvar”.
Pronto!
Acesse uma postagem de seu blog e veja se o seu perfil já está sendo mostrado corretamente abaixo da postagem.
O que fazer quando o perfil não for mostrado
Se você fez todo o procedimento acima de forma correta mas seu perfil não foi mostrado, é bastante provável que o problema esteja em seu template.
Como trata-se de um novo recurso, os templates personalizados ou que foram aplicados antes da existência do perfil precisam de uma pequena alteração para funcionar.
O trecho necessário está abaixo.
Ele deve ser colocado dentro da área
<div class=’post-footer’>, antes da tag de fechamento </div>
<b:if cond=’data:post.authorAboutMe’>
<div class=’author-profile’ itemprop=’author’ itemscope=’itemscope’ itemtype=’http://schema.org/Person’>
<b:if cond=’data:post.authorPhoto.url’>
<img expr:src=’data:post.authorPhoto.url’ itemprop=’image’ width=’50px’/>
</b:if>
<div>
<a class=’g-profile’ expr:href=’data:post.authorProfileUrl’ itemprop=’url’ rel=’author’ title=’author profile’>
<span itemprop=’name’><data:post.author/></span>
</a>
</div>
<span itemprop=’description’><data:post.authorAboutMe/></span>
</div>
</b:if>
Se você tiver dificuldades para encontrar onde colocar o trecho em seu template, você pode usar o recurso reverter modelos de widget para o padrão.
Após realizar esse processo, o novo código será automaticamente inserido no ponto correto.
Como esse recurso pode remover personalizações do seu template, o ideal é realizá-lo em um blog de testes, após aplicar seu template a ele.
Como personalizar o visual do seu perfil
Caso você não goste do aspecto visual de seu perfil, é possível alterá-lo fazendo algumas pequenas mudanças.
- Não mostrar o perfil na página inicial – Com o código padrão do Blogger, o seu perfil será mostrado em todas as suas páginas, incluindo a página inicial e suas páginas estáticas. Para que ele seja mostrado somente nas postagens, basta adicionar as linhas mostradas abaixo antes e depois do código original (veja no item acima o código original):
CÓDIGO ORIGINAL DO PERFIL
</b:if>
- Alterar o tamanho da foto – Para alterar o tamanho de sua foto, basta modificar o trecho width=’50px’, substituindo o 50 pelo tamanho que você deseja que sua foto tenha.
- Alterar cores, fontes e tamanhos – Você pode alterar diversos outros elementos adicionando um código CSS personalizado diretamente ao seu template ou na área “Modelo” / “Personalizar” / “Avançado” / “Adicionar CSS” (caso tenha dúvidas sobre como fazer isso, sugiro a leitura do artigo CSS no Blogger: o que é e como usar). Abaixo está um exemplo de código para personalizar o painel, que você pode adaptar para a sua necessidade:
margin: 5px 5px 0 0;
overflow: hidden;
font-size: 140%;
color: #000;
font-weight: bold;
}
.author-profile a:link{
color: #FF0000;
}
.author-profile a:visited{
color: #0026FF;
}
Conclusão
Se você ainda não mostra o seu perfil no rodapé das postagens de seu blog, esta é uma ótima chance!
Com este recurso do Blogger, o processo ficou bem mais simples, especialmente para quem tem dificuldades em alterar o HTML do template.
E você, já conhecia este recurso?
Pretende utilizá-lo em seu blog?
Deixe um comentário e compartilhe sua opinião com os demais leitores.
Leave feedback about this