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:

47 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. 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. Aw,adorei!Afinal,tudo aqui neste blog é fofo,não?
    imaginesgirl.blogspot.com.br

    ResponderExcluir
  6. 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. Uau! Que show esse tutorial, com certeza o usarei em um layout futuro <33

    Seus tutoriais são os melhores!

    Adolescente Nerd // Oficial [] 彡

    ResponderExcluir
  9. Posta mais coisinhas! Adoro seu blog!

    ResponderExcluir
  10. 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
  11. Sempre achei bem interessante neste efeito, porém nunca usei, acho lindo e o tutorial bem explicado! Xoxo

    | | Mini Realeza | |

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

    http://blogheynanny.blogspot.com

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

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

    ResponderExcluir
  15. Olá, vim aqui pedir um tutorial ^^

    ResponderExcluir
  16. 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
  17. 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
  18. 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
  19. Otimas dicas *-*
    Seu blogger é lindo <3
    http://diariodelolivlet.blogspot.com.br/

    ResponderExcluir
  20. 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
  21. Kawaii d+never pare de postar no blog <3

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

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

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

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

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

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

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

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

    ResponderExcluir
  28. 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
  29. Respostas
    1. Muito obrigada :D
      Seja sempre bem-vinda!!! Bju

      Excluir
  30. 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
  31. Respostas
    1. Vou rever o tutorial, fiquei muito tempo fora, talvez o blogger tenha mudado algo. Bju

      Excluir
    2. Continua dando certo aqui :)

      Excluir

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 - Google+ - Deviantart