Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508711548
Vida do cache: 1508754748
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Postagens Tutoriais Blogger

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.

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:

perfil1

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.

perfil4

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

perfil2

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

perfil3

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

perfil6

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.

perfil5

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:

perfil7

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

perfil8

Pronto! :)



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.

Sobre o autor | Website

Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.

16 Comentários

  1. Adorei, estava mesmo precisando, sempre acabo aqui no seu blog, é o melhor de todos, vc explica muito bem. Tem sites que fingem ajudar pra fisgar seu viewer, mas nao explicam tudo querem ser os únicos a saberem das coisas.

  2. Olá Yara,
    As cores do nome e do texto ficam iguais mesmo tentando diferenciá-las de todas as maneiras! Será que estou fazendo alguma coisa errada?

  3. Obrigada. Ajudou muito. Eu uso um template comprado e não conseguia habilitar essa função sem desorganizar outras. Com esse código, tudo continuou como deve ser e consegui colocar o autor no lugar desejado.

  4. Muito obrigado… há anos vejo esse estilo de postagem com perfil no rodapé em muitos outros blos… e a faz uns 4 anos que queria saber essa função.. obrigado por me ajudar…!!!

    cicloabraços
    joaozinho

    • Yara Georgia disse:

      Oi, Joãozinho! Na verdade, esse recurso foi implementado esse ano no Blogger, enquanto pode ser gerado por plugins em blogs que usam o WordPress, caso do Mundo Blogger.
      Obrigada pelo comentário!

  5. Sybylla disse:

    Poxa, o Blogger tá se superando cada vez mais. 😀

  6. Pablo Eduardo disse:

    Como faço com a questão das redes sociais?

    • Yara Georgia disse:

      Boa sacada, Pablo. Vou escrever um tutorial incrementando este aqui com a questão das redes sociais assim que tiver um tempo. Obrigada pela sugestão indireta! ;D

      • Fabrise disse:

        Yara, já tens o post ensinando a colocar as redes sociais na assinatura também? Procurei por aqui e não encontrei.

  7. Amanda Valverde disse:

    E se eu tiver mais de um autor no meu site? como faço? tenho que fazer isso pra cada um, como é?

    • Yara Georgia disse:

      Basta que cada autor configure o seu próprio perfil, nas duas primeiras instruções do primeiro passo. O restante vai ter efeito automaticamente, pois o recurso é nativo do próprio Blogger :)

  8. Muito boa a dica. Obrigada

  9. Marcos disse:

    Tentei fazer isso no meu blog de acordo com a dica de outro site e não deu certo, creio que seja porque meu template não seja um modelo original do Blogger e sim um baixado. Vou tentar pela sua dica e ver se funciona! Parabéns pelo artigo.

    • Yara Georgia disse:

      Pois é, Marcos, o tutorial aqui é específico para os templates padrão do Blogger… Os templates baixados geralmente têm código diferente, e não “recebem” as atualizações dos recursos que o Blogger recebe… Mas e aí, eu demorei um bocado para responder, vc tentou? Conseguiu? /ah, e muito obrigada pelo elogio. :)

      • Marcos Silva disse:

        Rsrsrs Olá Yara! Na verdade você demorou a responder e eu demorei a tentar fazer. Quando fui tentar acabei esbarrando em uma dúvida: Meu perfil vinculado ao blog é do Google+ e não do Blogger. Será que funciona da mesma maneira?

  10. Ciro disse:

    Muito bom estava a procura dessa dica.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.