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:
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.
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.
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:
Adoreiiiiii muitoooooo! Você é um blogueira perfeita demais!
ResponderExcluirThere | Fluffy White
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 :)
ResponderExcluirkiss kiss
Oi Roberta! tudo bem?
ResponderExcluireu 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 !
legal o tuto, cada vez que entro aqui o blog tá com uma cara diferente, ou é o cabeçalho que muda, que fofinho
ResponderExcluirAw,adorei!Afinal,tudo aqui neste blog é fofo,não?
ResponderExcluirimaginesgirl.blogspot.com.br
Aw,valeu:D
ResponderExcluirBlog super kawaii^^
imaginesgirl.blogspot.com.br
Sempre tive curiosidade em relação a esse código, agora deu para esclarecer!
ResponderExcluirE 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!
Adorei! Muito fofo >.<
ResponderExcluirUau! Que show esse tutorial, com certeza o usarei em um layout futuro <33
ResponderExcluirSeus tutoriais são os melhores!
Adolescente Nerd // Oficial [♥] 彡
Posta mais coisinhas! Adoro seu blog!
ResponderExcluirNhaaa, que amor! Com certeza vou usar ;3
ResponderExcluirIncrível como seus tutorias são sempre meus salvadores ><
Kissus de menta ♥ ~ alcoolize.blogspot.com.br
Sempre achei bem interessante neste efeito, porém nunca usei, acho lindo e o tutorial bem explicado! Xoxo♡
ResponderExcluir| | Mini Realeza | |
Não consegui modificar o meu. A coluna de post já está modificada será que isso interfere? Help.
ResponderExcluirhttp://blogheynanny.blogspot.com
Talvez sim...
Excluirnossa,amei muito
ResponderExcluirsegue ?
meninasmalvadas-moda.blogspot.com.br
Amei o post *--* queria aprender mais sobre codificação, já que não sei quase nada....
ResponderExcluirLegal, gostei (ノ◕ヮ◕)ノ
ResponderExcluirOlá, vim aqui pedir um tutorial ^^
ResponderExcluircomo eu coloco isso no meu site: seu comentário estará visível depois de ser aprovado? beijos!!
ResponderExcluirConfigurações - Postagens, comentários e compartilhamentos - Em Moderação de Comentários marque Sempre.
Excluiroi
ResponderExcluirOi, Roberta! Isso funciona pra múltiplos autores?
ResponderExcluirPensei em colocar lá no Otome TeaTime, mas nós somos 7 autoras...
beijos!
Tem sim :3 Veja nos comentários abaixo.
Excluirpoxa 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?
ResponderExcluirSugestão de post anotada ^^
ExcluirOtimas dicas *-*
ResponderExcluirSeu blogger é lindo <3
http://diariodelolivlet.blogspot.com.br/
esses modelos servem para mais de um autor no blog?
ResponderExcluirSim. 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.
ExcluirVoltaa linda! Você foi indicada aqui:
ResponderExcluir• nova postagem: Melhores Layouts Femininos Grátis
• meu blog: www.montadanoestilo.com.br
Kawaii d+never pare de postar no blog <3
ResponderExcluirLegal... vou tentar colocar no meu blog :)
ResponderExcluirhttp://plumasdemetal.blogspot.com.br/
Que legal essa dica.. embora eu sempre me embole nos códigos xD
ResponderExcluirhttp://diariodelolivlet.blogspot.com.br/
Gostei e faz um post falando como fazer fanfic no blog
ResponderExcluirAdorei seu Blog, obrigada pelo tutorial. Bjs...
ResponderExcluirnice and sweet
ResponderExcluirmitraherbal ahlinya herbal
Adoro seu blog, amora ^.^
ResponderExcluirÉ muito útil e serve de inspiração para o meu <3
Obrigada, fofinha :3
http://yukokawaii15.blogspot.com.br/
Adorei o Tutorial, me ajudou muito ^^
ResponderExcluirBeijos
Queria te perguntar uma coisa...
ResponderExcluirvocê pretende colocar um template no mesmo modelo do seu para download, só com cores diferentes é personagens também???
Este modelo que uso é do site soratemplates (link no final do blog), eu só personalizei :3
ExcluirUm dia quero aprender a fazer templates responsivos sim, aí disponibilizo aqui :)
Amei1 Seu blog é lindo!
ResponderExcluirMuito obrigada :D
ExcluirSeja sempre bem-vinda!!! Bju
Amei o Tutorial Roberta *--* Deu certinho
ResponderExcluirGostaria de saber e se sabe me informar se dá pra colocar mais de um autor ?
Beijos
Sim, eu acho. Vou rever o tutorial nesse caso para te responder com mais certeza. Bju
ExcluirEstive 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.
ExcluirOi o meu não deu certo :(
ResponderExcluirVou rever o tutorial, fiquei muito tempo fora, talvez o blogger tenha mudado algo. Bju
ExcluirContinua dando certo aqui :)
ExcluirConsegui 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.
ResponderExcluirMuito obrigada!
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