Perfil do autor abaixo do post – Recurso nativo do Blogger

Há algum tempo o Blogger implantou um novo recurso: o de exibir o perfil do autor logo abaixo dos posts. A ferramenta é interessante para que os leitores do blog tenham uma breve descrição de quem escreveu o post, ainda mais no caso de blogs com diversos autores. Antes, para usar esse tipo de recurso, era preciso instalar um hack manualmente, que não raro gerava algum tipo de erro ou simplesmente não funcionava.
Agora, podemos fazer isso de uma forma muito simples; e, claro, personalizar o seu perfil.

DEMO

Personalizando o perfil do autor do Blogger

Passo 1: Configurando o perfil e ativando o recurso

Primeiramente: este recurso vai utilizar o seu perfil do Blogger; mais especificamente, a sua foto e o que você escreveu na ‘Introdução’ em ‘Sobre mim’, como abaixo:

Se você não souber de onde eu tirei isso, no canto superior do seu painel tem o seu nome, foto e uma setinha dropdown. Clique nela e vá em “Perfil do Blogger”. Então vá em “Editar seu perfil”, onde será possível alterar a foto, a Introdução e diversos outros detalhes.

Com isso pronto, acesse a opção “Layout” do seu blog e, na caixa ‘Postagens’, clique em ‘Editar’.

Role a janelinha que se abre e marque a opção ‘Mostrar perfil do autor abaixo da postagem’ e salve.

Acessando o seu blog após esse passo, ele deverá estar assim:

Caso passando dessa parte, o perfil não apareça, vamos corrigir o seu template. Vá no HTML do blog (“Modelo” > “Editar HTML”), clique em alguma área do editor, dê Ctrl+F e procure por post-footer-line post-footer-line-3.

Abaixo dessa linha, cole o seguinte:

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

Salve as modificações.

[dica]Atenção: em templates modificados, pode ser que haja um probleminha após essa parte e, em vez de aparecer o link do perfil do autor, o link renderizado é o da própria postagem. Para corrigir isso, você pode colocar outro link na tag <a class=’g-profile’ (caso seja o único autor do blog) ou simplesmente removê-la. Só não se esqueça de remover o seu fechamento também: </a>.[/dica]

Eis como você pode editá-la: apague o trecho expr:href='data:post.authorProfileUrl'e coloque no lugar

href=’SEU-LINK-AQUI’

apenas atentando em colocar o seu link no local indicado. A tag deverá ficar assim:

<a class='g-profile' href='SEU-LINK-AQUI' itemprop='url' rel='author' title='author profile'>

Passo 2: Personalizando tamanho da foto e páginas onde o gadget aparece

Por padrão, o container do perfil aparecerá abaixo de todos os elementos do post, e a sua foto terá 50px de altura e alrgura. Para corrigir isso, ainda no HTML do blog, procure por author-profile. Ao localizar esse trecho, preste atenção numa tag img com um atributo width definido para 50px. Você pode ajustar o valor para aumentar o tamanho da foto. Vou usar 100px.

Você tendo corrigido o template ou não, o perfil aparecerá em todos os posts na página inicial, de arquivos e marcadores. Para fazê-lo aparecer apenas nas páginas internas, localize “data:post.authorAboutMe” (sem as aspas). Note que serão encontradas duas ocorrências deste trecho. Na linha ANTES da primeira ocorrência, insira o seguinte comando condicional:

<b:if cond='data:blog.pageType == "item"'>

Abaixo da segunda ocorrência de data:post.authorAboutMe, preste atenção que há

</div></b:if>

Você vai colar OUTRA </b:if> ao lado da que já está lá, para fechar a condicional que você inseriu. O código deverá ficar assim:

Salve as modificações.

Passo 3: Personalizando a aparência geral do perfil

Na aba “Layout”, vá no Designer de Modelo > Avançado > Adicionar CSS. Na caixa de texto, cole o seguinte:

.author-profile { /* cor da fonte, cor de fundo, bordas */
  color: #333;
  text-shadow: 1px 1px 0px #ccc;
  border: 1px dashed #cc0000;
  background: #fefefe;
  padding: 5px;
}

.author-profile img { /* sombra na imagem */
  margin: 5px;
  box-shadow: 2px 2px 2px #ccc;
}

.author-profile span { /* estilos do nome do autor */
  color: #cc0000;
  font-size: 15px;
  font-weight: bold;
}

Edite as partes destacadas de acordo com o seu template, clique em “Aplicar ao blog” a cada alteração e visualize para ver se está do seu gosto.

O resultado depois disso será: