Gerenciando Blog - Um portal de Conteúdos Blog Blogger NOVIDADE: Mostrar perfil do autor abaixo da postagem no Blogger
Blogger Noticias

NOVIDADE: Mostrar perfil do autor abaixo da postagem no Blogger

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):

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
  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:
.author-profile {
  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.

Sair da versão mobile