Biografia do autor no rodapé da postagem (Recurso nativo do Blogger) [002]

Yo! Yo! Como vão hoje meus queridos bunnie's? Hoje venho mais uma forma de aplicar biografia do autor abaixo do rodapé da postagem, usando o recurso nativo do Blogger. Eu já havia postado como aplicar biografia no blog, porém ela é aplicada e editada dentro do HTML. Diferente dessa que usaremos o perfil já disponível no Google +  ou Blogger. Nesse tutorial vou ensinar como ativa-lo e personaliza-lo. =) E então vamos ao tutorial? 

Brevia do efeito

OBS: Estou ensinando como personalizar a biografia nativa, porém o código disponibilizado é uma base limpa, então não estará personalizado como na imagem acima.  Assim vocês podem personalizar como desejarem.


Primeiro passo: Configurando o Perfil Nativo do Blogger

Para quem esta habituado ao blogger deve saber que ele nos oferece duas formas de Perfil. O do Google+ e do próprio o Blogger. Contas criadas recentemente já possuem perfil do Google+, porém você pode mudar para o do Blogger [ver tutorial], eu particularmente gosto mais do perfil do Google, pois é único e fica em todas as contas, além que ao mudar a foto do avatar, todas as fotos dos comentários que você já fez, em sites ou no youtube vai se atualizar, enquanto a do Blogger não. Ficara aquela mesma foto antiga, e os novos comentários com outra imagem.

Configurando no Blogger: 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’. O perfil do Blogger é publico automaticamente, mas caso não saiba onde edita-lo, trarei um tutorial em breve.

Configurando no Google Plus: Este recurso vai utilizar seu perfil do Google+, a foto e suas informações. Para que esse tutorial funcione, você precisa deixar sua Biografia em visualização publica, as demais informações podem ficar privadas, mas a bio não. Então vamos verificar isso, e se não tiver uma Biografia vamos ativa-la. (Clique aqui para ver o tutorial)

Segundo passo: Ativando Perfil Nativo do Blogger

Agora vamos para a segunda parte do nosso tutorial que é ativar, acesse a opção “Layout” do seu blog e, na caixa ‘Postagens’, clique em ‘Editar’. Como na imagem abaixo:

Clique para ver melhor

Uma janela vai abrir, role a janelinha e marque a opção "Mostrar perfil do autor abaixo da postagem" e salve.

Clique para ver melhor

Após feito isso, vá ate o final de alguma postagem e verifique se apareceu, devera estar mais ou menos assim. O tamanho pode mudar de acordo com a quantidade de texto de sua biografia.

Clique para ver melhor

Se verificou e  não apareceu, vamos corrigir isso. Vá ao HTML do seu blog Tema >>HTML clique em alguma área do editor, dê Ctrl+F e procure por post-footer-line post-footer-line-3.

Abaixo dele cole:

Códigos

     <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 alterações 

Atenção: em layout's 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 o </a>.

Você pode editá-la: apague o trecho expr:href='data:post.authorProfileUrl' e coloque no lugar href=’SEU-LINK-AQUI’

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

Terceiro passo: Personalizando tamanho da foto e páginas onde deve aparece

O padrão da imagem é 50px tanto de altura quanto de largura , caso queira que a imagem fique maior e com mais qualidade, vá até o HTML do blog, procure por: author-profile. Ao encontrar essa parte, procure pela tag com img, seguido de width e 50px. Aumente o valor do 50px para 100px ou mais dependendo de como vai personalizar sua biografia. Eu vou deixar no 100px

Clique para ver melhor

Pronto a imagem já esta arrumada. Mas pode se perceber que a biografia vai aparecer em todas as paginas do blog, então vamos arrumar para aparecer somente nas paginas internas da postagem. Para fazê-lo, localize “data:post.authorAboutMe” (sem as aspas). Note que serão encontradas duas ocorrências deste trecho. Vamos mexer no primeiro. ANTES da primeira ocorrência, insira o seguinte:

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

Abaixo da segunda ocorrência de data:post.authorAboutMe, haverá

</div></b:if>

Após o </b:if> cole outro </b:if>.

Ficara assim:

<b:if cond='data:blog.pageType == "item"'>
      <b:if cond='data:post.authorAboutMe'>
     ... outros códigos....
    </div></b:if></b:if>

Quarto passo: Aplicando estilo (CSS)

Essa é a parte que mais gosto! Ainda dentro do HTML do blog busque por  ]]></b:skin>, e acima dele cole:

Códigos

.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 de acordo com o seu layout e depois salvar! Visualize e prontinho! Como disse o modelo estará diferente do da imagem, mas é muito fácil de arrumar e dar seu toque de estilo.