Perfil do Autor Personalizado Abaixo do Post

Olá! Hoje trouxe duas maneiras para acrescentar ao final de cada postagem uma mini biografia de quem postou; na primeira vamos utilizar o recurso padrão do Blogger para esse fim; já na segunda, criaremos uma área para descrição do autor, aí você escolhe qual das duas vai usar
Personalizando o Recurso 'Mostrar perfil do autor abaixo da postagem' Padrão do Blogger
1.  Acesse Layout - clique em Editar em Postagens e marque a caixinha da imagem abaixo:
Essa opção mostra automaticamente o seu perfil usado no Blogger para postar; então a imagem que estiver nele e o que você escreveu lá ficarão visíveis abaixo das postagens.
2. Entre em Modelo - Editar HTML e cole isso antes de /b:skin:

@import url(http://fonts.googleapis.com/css?family=Delius+Swash+Caps);
.author-profile {/*personaliza a area geral*/
margin: 5px 5px 0 0;
overflow: hidden;
padding: 10px;
font-family: 'Delius Swash Caps', cursive;
font-size: 14px;
text-align: justify;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #FFA9A9;
width: 590px;
background:rgb(255, 232, 232);
border: 1px dashed rgb(255, 232, 232);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px #fff;
outline-offset: -5px;
outline: 1px dashed #fff;
}
.author-profile img {/*personaliza a sua foto*/
border: 1px solid #fee;
float: left;
margin: 0 5px;
width: 200px;
border-radius: 100%;
transition: 2s;
}
.author-profile img:hover {/*personaliza foto ao passar o mouse*/
border: 1px solid #fee;
float: left;
margin-right: 5px;
width: 200px;
opacity: 0.8;
border-radius: 2%;
}
/*personaliza os links*/
.author-profile a:link{
color: #FFA9A9;
text-decoration: none;
border-bottom: 1px dashed white;
text-shadow: 1px 1px #fff;
}
.author-profile a:visited{
color: #FFA9A9;
text-decoration: none;
border-bottom: 1px dashed white;
text-shadow: 1px 1px #fff;
}
.author-profile a:hover{
color: #FFA9A9;
text-decoration: none;
border-bottom: 1px dashed #FFA9A9;
text-shadow: 1px 1px #fee;
}

3. Pronto! Só salvar. Ah! Mais espere! O perfil padrão do Blogger aparece na página inicial; para que ele apareça apenas 'dentro' da postagem, procure por data:post.authorAboutMe; vai aparecer 2 vezes em seu HTML; antes da primeira, cole isso:
<b:if cond='data:blog.pageType == "item"'>
Depois da segunda vez, cole isso: </b:if>. Assim:
4. Resultado:

Criando um Perfil Abaixo das Postagens
Se você não utiliza os modelos padrões do Blogger, deverá criar um perfil e posicioná-lo abaixo dos posts; fiz dois modelinhos para vocês. Escolha um deles e cole os códigos onde indiquei:

Postado por mim♥
Oi. Eu sou a Roberta.
E esse é um modelo rosa para perfil.

1. Cole isso antes de /b:skin:
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
.aboutme{
float: left;
padding: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
width: 700px;
background: rgb(255, 210, 210);
margin: 0 10px 5px 0;
border: 1px solid #FFABAB;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px #FFABAB;
position: relative;
}
.aboutme:before {
content: "";
position: absolute;
bottom: -5px;
left: -1px;
width: 698px;
height: 5px;
background: #FFABAB;
border-left: 1px solid #FFABAB;
border-right: 1px solid #FFABAB;
box-shadow: 0px 1px 1px #FFABAB;
}
.afoto{
width: 100px;
float: left;  
padding: 0;
border-radius: 100%;
border: 1px solid;
margin: 0px 5px -5px 0px; 
}
.tituloo{
font-family: 'Lobster Two', cursive;
font-size: 2em;
margin: -140px 140px 0px 0px;  
text-align: center;
}

2.Procure por <div class='post-footer'> ou <div class='post-footer-line post-footer-line-3'/>, e cole ANTES dele isso aqui:
<b:if cond='data:blog.pageType == "item"'>
<div class="aboutme">
<p><img class='afoto' src="URL-DA-SUA-FOTO"/><span class='tituloo'>Postado por vc</span><br/>Escreve, escreve, escreve.</p> 
<p>Escreve, escreve, escreve.</p>
</div></b:if>

Postado por mim♥
Oi. Eu sou a Roberta.
E esse é um modelo que não é rosa para perfil.

1. Cole isso antes de /b:skin:
.aboutme{
float: left;
padding: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: rgb(221, 192, 155);
width: 600px;
background: rgb(255, 239, 218);
margin: 0 10px 5px 0;
border: 1px solid rgb(221, 192, 155);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px #fff;
position: relative;
}
.aboutme:before {
content: "";
position: absolute;
bottom: -5px;
left: -1px;
width: 598px;
height: 5px;
background: rgb(221, 192, 155);
border-left: 1px solid rgb(221, 192, 155);
border-right: 1px solid rgb(221, 192, 155);
box-shadow: 0px 1px 1px rgb(221, 192, 155);
}
.afoto{
width: 100px;
float: left;  
padding: 0;
border-radius: 100%;
border: 1px solid;
margin: 0px 5px -5px 0px; 
}
.tituloo{
font-family: 'Lobster Two', cursive;
font-size: 2em;
margin: -140px 140px 0px 0px;  
text-align: center;
}

2. Procure por <div class='post-footer'> ou <div class='post-footer-line post-footer-line-3'/>, e cole ANTES dele isso aqui:
<b:if cond='data:blog.pageType == "item"'>
<div class="aboutme">
<p><img class='afoto' src="URL-DA-SUA-FOTO"/><span class='tituloo'>Postado por vc</span><br/>Escreve, escreve, escreve.</p> 
<p>Escreve, escreve, escreve.</p>
</div></b:if>

E é isso; espero que gostem.Alguns créditos de recursos que utilizei para esse post:






Postar um comentário

49 Comentários

  1. Adoreiiiiii muitoooooo! Você é um blogueira perfeita demais!

    There | Fluffy White

    ResponderExcluir
  2. ahh *0* outro tutorial que eu super sempre quis saber <3 Muito obrigada pelas dicas, estou pensando em mudar o layout do meu blog, fazer uma coisa mais elegante etc e acho super legal a ideia de mini profile embaixo de cada post :)

    kiss kiss

    ResponderExcluir
  3. Anônimo17 dezembro

    Oi Roberta! tudo bem?
    eu adoro seu blog e acompanho ele desde quando iniciei o meu!
    Lá pra 2012 por ai....
    bjs e amei o tutorial com certeza vou usar !

    ResponderExcluir
  4. legal o tuto, cada vez que entro aqui o blog tá com uma cara diferente, ou é o cabeçalho que muda, que fofinho

    ResponderExcluir
  5. Anônimo17 dezembro

    Aw,adorei!Afinal,tudo aqui neste blog é fofo,não?
    imaginesgirl.blogspot.com.br

    ResponderExcluir
  6. Anônimo21 dezembro

    Aw,valeu:D
    Blog super kawaii^^
    imaginesgirl.blogspot.com.br

    ResponderExcluir
  7. Sempre tive curiosidade em relação a esse código, agora deu para esclarecer!
    E os modelinhos que você fez ficaram muito kawaiis!
    Ah, indiquei-lhe a uma tag: http://diveinthis.blogspot.com.br/2015/01/tag-metas-mensais-para-2015.html
    Ficaria muito agradecida se pudesses respondê-la.
    Abraços!

    ResponderExcluir
  8. Adorei! Muito fofo >.<

    ResponderExcluir
  9. Uau! Que show esse tutorial, com certeza o usarei em um layout futuro <33

    Seus tutoriais são os melhores!

    Adolescente Nerd // Oficial [] 彡

    ResponderExcluir
  10. Posta mais coisinhas! Adoro seu blog!

    ResponderExcluir
  11. Nhaaa, que amor! Com certeza vou usar ;3
    Incrível como seus tutorias são sempre meus salvadores ><

    Kissus de menta ♥ ~ alcoolize.blogspot.com.br

    ResponderExcluir
  12. Sempre achei bem interessante neste efeito, porém nunca usei, acho lindo e o tutorial bem explicado! Xoxo

    | | Mini Realeza | |

    ResponderExcluir
  13. Não consegui modificar o meu. A coluna de post já está modificada será que isso interfere? Help.

    http://blogheynanny.blogspot.com

    ResponderExcluir
  14. nossa,amei muito
    segue ?
    meninasmalvadas-moda.blogspot.com.br

    ResponderExcluir
  15. Amei o post *--* queria aprender mais sobre codificação, já que não sei quase nada....

    ResponderExcluir
  16. Legal, gostei (ノ◕ヮ◕)ノ

    ResponderExcluir
  17. Anônimo27 abril

    Olá, vim aqui pedir um tutorial ^^

    ResponderExcluir
  18. Anônimo27 abril

    como eu coloco isso no meu site: seu comentário estará visível depois de ser aprovado? beijos!!

    ResponderExcluir
    Respostas
    1. Configurações - Postagens, comentários e compartilhamentos - Em Moderação de Comentários marque Sempre.

      Excluir
  19. Oi, Roberta! Isso funciona pra múltiplos autores?
    Pensei em colocar lá no Otome TeaTime, mas nós somos 7 autoras...

    beijos!

    ResponderExcluir
    Respostas
    1. Tem sim :3 Veja nos comentários abaixo.

      Excluir
  20. poxa queria mudar a cor pra branco não consegui...faz tutorial de como vc faz pro cabeçalho ficar grandão e tipo assim ele ir até as laterais?

    ResponderExcluir
  21. Otimas dicas *-*
    Seu blogger é lindo <3
    http://diariodelolivlet.blogspot.com.br/

    ResponderExcluir
  22. esses modelos servem para mais de um autor no blog?

    ResponderExcluir
    Respostas
    1. Sim. Li no Mundo Blogger que parece que como o Blogger tem esse recurso nativo, a personalização aparece para cada autor. E usando a segunda maneira, a de criar a área do autor, tem jeito sim. Basta você repetir os códigos, mudando as áreas dos estilos e do que vai no post-footer, por exemplo, .aboutme2, .aboutme2:before, .afoto2, .tituloo2... Se quiser adicionar mais um autor, coloque o número 3 e assim por diante, modificando os estilos, aparecendo um pouco sobre cada autor em todas as postagens.

      Excluir
  23. Voltaa linda! Você foi indicada aqui:
    • nova postagem: Melhores Layouts Femininos Grátis
    • meu blog: www.montadanoestilo.com.br

    ResponderExcluir
  24. Kawaii d+never pare de postar no blog <3

    ResponderExcluir
  25. Legal... vou tentar colocar no meu blog :)

    http://plumasdemetal.blogspot.com.br/

    ResponderExcluir
  26. Que legal essa dica.. embora eu sempre me embole nos códigos xD
    http://diariodelolivlet.blogspot.com.br/

    ResponderExcluir
  27. Gostei e faz um post falando como fazer fanfic no blog

    ResponderExcluir
  28. Adorei seu Blog, obrigada pelo tutorial. Bjs...

    ResponderExcluir
  29. Adoro seu blog, amora ^.^
    É muito útil e serve de inspiração para o meu <3
    Obrigada, fofinha :3

    http://yukokawaii15.blogspot.com.br/

    ResponderExcluir
  30. Adorei o Tutorial, me ajudou muito ^^
    Beijos

    ResponderExcluir
  31. Queria te perguntar uma coisa...
    você pretende colocar um template no mesmo modelo do seu para download, só com cores diferentes é personagens também???

    ResponderExcluir
    Respostas
    1. Este modelo que uso é do site soratemplates (link no final do blog), eu só personalizei :3
      Um dia quero aprender a fazer templates responsivos sim, aí disponibilizo aqui :)

      Excluir
  32. Amei1 Seu blog é lindo!

    ResponderExcluir
    Respostas
    1. Muito obrigada :D
      Seja sempre bem-vinda!!! Bju

      Excluir
  33. Amei o Tutorial Roberta *--* Deu certinho
    Gostaria de saber e se sabe me informar se dá pra colocar mais de um autor ?
    Beijos

    ResponderExcluir
    Respostas
    1. Sim, eu acho. Vou rever o tutorial nesse caso para te responder com mais certeza. Bju

      Excluir
    2. Estive dando uma pesquisada e no Mundo Blogger vi que parece que como o Blogger tem esse recurso nativo, a personalização aparece para cada autor. E usando a segunda maneira, a de criar a área do autor, tem jeito sim. Basta você repetir os códigos, mudando as áreas dos estilos e do que vai no post-footer, por exemplo, .aboutme2, .aboutme2:before, .afoto2, .tituloo2... Se quiser adicionar mais um autor, coloque o número 3 e assim por diante, modificando os estilos, aparecendo um pouco sobre cada autor em todas as postagens.

      Excluir
  34. Anônimo10 junho

    Oi o meu não deu certo :(

    ResponderExcluir
    Respostas
    1. Vou rever o tutorial, fiquei muito tempo fora, talvez o blogger tenha mudado algo. Bju

      Excluir
    2. Continua dando certo aqui :)

      Excluir
  35. Consegui ajustar e deixar do jeitinho que eu queria, muito obrigada pelo tutorial incrível mesmo pesquisando em inglês não achei um bom igual ao seu.
    Muito obrigada!

    ResponderExcluir
  36. Graças ao seu tutorial consegui ter uma noção de como vou fazer a barra de autor no meu blog arg3 diversos. Muito obrigado!!!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up