Como colocar descrição dos autores no final dos posts do Blogger

10 6 99

👤 Como Adicionar uma Caixa "Sobre o Autor" no Final de Cada Post do Blogger

Muitos blogueiros desejam criar um vínculo mais próximo com seus leitores, e uma das melhores formas é apresentar quem escreveu o artigo logo após o conteúdo. Essa prática – comum em blogs profissionais – aumenta a credibilidade e convida o visitante a conhecer outros textos do mesmo autor.

Neste tutorial, você aprenderá a inserir um bloco personalizado com foto, descrição e links do autor ao final de cada postagem, utilizando apenas o editor HTML do Blogger. Apesar de exigir um pouco de atenção, o resultado vale o esforço.

⚠️ Pré‑requisito: conhecimento básico de CSS (para ajustar cores e tamanhos) e familiaridade com a edição do template do Blogger. Antes de começar, faça um backup completo do seu tema (Tema → Fazer backup / Restaurar).

🎨 Etapa 1 – Inserir os estilos CSS do bloco do autor

A primeira etapa é adicionar as regras de estilo que vão definir a aparência da caixa: largura, fundo, bordas, fonte e posicionamento da imagem.

No painel do Blogger, acesse Tema → Editar HTML.
Marque a opção "Expandir modelos de widgets" (essencial para localizar os trechos corretos).
Use Ctrl+F (ou Cmd+F no Mac) e procure pela tag:
text
```
]]></b:skin>
```
Imediatamente antes dessa tag, cole o código CSS modernizado abaixo:

/* =============================================
   CAIXA "SOBRE O AUTOR" – VERSÃO RESPONSIVA
   ============================================= */
#post-footer-autor {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: #f5f7fa;        /* Cor de fundo – altere à vontade */
  border: 1px solid #dce3ec;  /* Cor e espessura da borda */
  border-radius: 12px;        /* Cantos arredondados */
  margin: 25px 0 15px 0;
  padding: 15px;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}

#autor-img {
  flex-shrink: 0;            /* impede que a imagem encolha */
  width: 80px;               /* largura da imagem */
  height: 80px;              /* altura da imagem */
  background: #ffffff;
  border-radius: 50%;        /* imagem redonda (opcional) */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#autor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ajusta a foto dentro do círculo */
  display: block;
}

#autor-sobre {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #2c3e50;            /* cor do texto principal */
}

#autor-sobre b {
  font-size: 1.05rem;
  color: #1e2a3a;
  display: block;
  margin-bottom: 6px;
}

#autor-sobre p {
  margin: 0 0 8px 0;
  text-align: justify;
}

#autor-sobre a {
  color: #3b82f6;            /* cor dos links */
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted transparent;
  transition: 0.2s;
}

#autor-sobre a:hover {
  color: #1e40af;
  border-bottom-color: #3b82f6;
  text-decoration: none;
}

/* Versão para dispositivos móveis – empilha imagem e texto */
@media (max-width: 600px) {
  #post-footer-autor {
    flex-direction: column;
    text-align: center;
  }
  #autor-sobre p {
    text-align: center;
  }
}

🔧 Personalização rápida (cores e tamanhos):

Elemento	Onde alterar	Exemplo
Fundo da caixa	`background: #f5f7fa;`	`#fff3e0` (laranja claro)
Borda	`border: 1px solid #dce3ec;`	`2px solid #ff9900`
Cantos arredondados	`border-radius: 12px;`	`8px`
Largura da imagem	`width: 80px; height: 80px;`	`70px`
Cor do texto dos links	`color: #3b82f6;`	`#dc7e2c`

📝 Etapa 2 – Inserir o código HTML condicional (aparece apenas nos posts)

Agora vamos colocar o bloco que realmente exibirá a foto, a descrição e o link do autor. Ele deve ficar dentro da área de rodapé do post (<div class='post-footer'>).

Ainda no editor HTML, procure pela linha:
html
```
<div class='post-footer'>
```
(use Ctrl+F para encontrá-la rapidamente).
Imediatamente antes dessa linha (ou logo após a abertura da <div>, dependendo do template), cole o seguinte código:

<!-- ========== INÍCIO – CAIXA SOBRE O AUTOR ========== -->
<b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:post.author == "NOME_DO_AUTOR"'>
    <div id='post-footer-autor'>
      <div id='autor-img'>
        <img src='URL_DA_IMAGEM_DO_AUTOR' alt='Foto do autor' />
      </div>
      <div id='autor-sobre'>
        <b>Sobre o autor:</b>
        <p>Escreva aqui uma breve biografia, seus interesses e qualificações. Mostre aos leitores por que eles devem confiar no seu conteúdo.</p>
        <a href='LINK_DO_SITE_OU_PERFIL'>Visitar site do autor</a>
      </div>
    </div>
  </b:if>
</b:if>
<!-- ========== FIM – CAIXA SOBRE O AUTOR ========== -->

Personalize os seguintes campos (substitua os textos em CAIXA ALTA):
- NOME_DO_AUTOR – escreva exatamente como aparece no campo "Autor" das suas postagens. Ex: Priscila Fago (respeite letras maiúsculas/minúsculas).
- URL_DA_IMAGEM_DO_AUTOR – link direto para a foto (recomendado 80×80 ou 100×100 pixels). Use serviços como ImgBB, PostImage ou Google Drive (apenas para download).
- Escreva aqui uma breve biografia – substitua pelo seu texto real.
- LINK_DO_SITE_OU_PERFIL – pode ser um link para seu Twitter, LinkedIn, página "Sobre", Instagram ou outro blog.
- Visitar site do autor – altere o texto do link se desejar (ex: "Me siga no Twitter").
Para blogs com mais de um autor: repita o bloco interno (<b:if cond='data:post.author == "..."> ... </b:if>) para cada pessoa, alterando o nome e as informações.

✅ Etapa 3 – Salvar e testar

Clique em Salvar tema (canto superior direito).
Abra uma postagem qualquer do seu blog (não a página inicial) e role até o final – você verá a caixa do autor logo acima do rodapé de comentários.
Teste em dispositivos móveis: a caixa deve se reorganizar (imagem em cima, texto embaixo) graças ao @media do CSS.

🧠 Dicas extras e solução de problemas

Problema	Possível causa	Solução
A caixa não aparece	Nome do autor não confere	Verifique o nome exato nas configurações do post (edite qualquer post e veja o campo "Autor")
A imagem fica esticada	Dimensões diferentes do CSS	Use uma imagem quadrada ou ajuste `object-fit` no CSS
A caixa aparece também na home	Condicional `data:blog.pageType` ausente	Mantenha o `<b:if cond='data:blog.pageType == "item"'>` ao redor do bloco
Quero esconder em páginas estáticas	A condicional já faz isso	Está correto; só aparece em posts (item).

🔗 Links úteis e atualizados

🏁 Conclusão

Agora seu blog tem um toque mais profissional e humano. A caixa "Sobre o autor" ajuda a construir autoridade, melhora a taxa de cliques em links internos e é um diferencial importante para blogs com múltiplos colaboradores. Mesmo sendo um hack um pouco mais complexo, seguindo o passo a passo com atenção você conseguirá personalizar cores, bordas e fontes sem dificuldade.

🔑 Palavras-chave (keywords)

caixa sobre o autor, descrição do autor no blogger, rodapé de posts, foto do autor, biografia no blog, hack blogger, CSS personalizado, múltiplos autores, template blogger responsivo, editar HTML blogger

📢 Hashtags

#SobreAutor #CaixaAutorBlogger #DicasBlogger #PersonalizarTemplate #CSSBlogger #RodapeDePosts #MultiplosAutores #HackBlogger #BiografiaNoBlog #TutorialBlogger

Reactions