10/09/2015

Biografia do autor no rodapé da postagem [001]


Ohayoooo meus doces coelhinhos,como estão? E ai?! Vamos ao tutorial do dia? Ele já é velhinho mas como nunca postei.... Nesse tutorial vou ensinar como colocar uma curta biografia de autor no rodapé da postagem, vou mostrar dois modo.

O primeiro modo é mais pratico é apenas aplicar e personalizar, fica abaixo da postagem junto a área. O segundo modo é separado da área da postagem como dos comentários, porem é necessário mexer na área da postagem e comentários. Por esse motivo aconselho adicioná-lo primeiro antes de qualquer alteração nessas áreas (podendo editá-las livremente depois). O segundo moo foi desenvolvido por mim, utilizando os códigos padrões do blog não testei em layouts convertidos. 

Ambos os códigos funcionam no Travel, Simple e outros padrões é só adicionar o Código nos seus respectivos lugares pois em cada layout se encontra em lugares diferentes.

Primeiro modo:
Clique para ver melhor


1. Vá até a Pagina Modelo e clique em Editar HTML, ao abrir os códigos de seu blog procure por ]]></b:skin> e acima dele cole:

Códigos
.bio-autor{
margin:10px 2px 20px 2px; ---/* espaço de dentro da bio */
padding:5px 0 15px;
border-top: 1px dotted #000; ---/* edite cor da borda */
border-bottom: 1px dotted #000; ---/* edite cor da borda */
}
.autor-avatar{
float:left;
marg in:5px;
}
.autor-text{
color:#494949; ---/* edite cor da fonte */
font-style:none;
font-size:12px; ---/* tamanho da fonte do texto */
text-transform:none;
padding:5px;
margin-left:5px;
}
.autor-text p{
padding:0 auto;
margin: 0 auto;
text-align: justify;
}
.autor-text h3{
text-transform:none;
font-size:17px; ---/* Tamanho da fonte do título */
color:#777; ---/* edite cor da fonte */
font-weight:bold;
margin-top:-5px;
}
.autor-text a:link, .autor-text a:visited{
font-size:12px;
text-transform:none;
}

2. Agora salve e vamos para a segunda parte do código. Ainda dentro do HTML procure por:

Códigos
<div class='post-footer'>

Se tiver dificuldade para encontrar, procure apenas pela parte em vermelho.

Agora que encontrou abaixo dele cole:

Códigos
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;NOME-DO-AUTOR&quot;'>
<div class='bio-autor'>
<div class='autor-avatar'>
<img alt='Nome do Autor' height='75' src='ENDEREÇO-DA-IMAGEM' width='75'/>
</div>
<div class='autor-text'>
<h3>Sobre o autor</h3><p><b>Nome do Autor</b> Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 3 linhas. Se quiser coloque um link para a página do blog que fala mais sobre o autor. <a href='LINK'>Leia Mais sobre o autor...</a>
</p>
</div>
</div>
</b:if>
</b:if>

Dentro de um corpo de template/layout existe dois ou mais códigos desse. Geralmente é no segundo que se cola, mas pode ocorrer de não funcionar no segundo então faça um teste rápido colando nos outros. As partes destacadas em azul são os trechos que vai arrumar. 


Segundo modo
Clique para ver melhor


Eu arrumei o meu é ficou assim, pois não gosto de bio colada na postagem... então resolvi editar um pouquinho os códigos. E resolvi compartilhar com vocês esse macete, na verdade é mais uma manipulação de áreas do que códigos para dar esse resultado. Mas digo que precisará dar uma mexidinha no seu template caso queira colocar em seu blog, pois é necessário subir e descer algumas áreas para  ficar "ok". Deixei um modelo base para vocês personalizarem como desejarem, mas antes de tudo façam esse tutorial em um blog de testes, por favor... 

1. Vamos separar as postagens em caixas, se você já tiver a área assim não tem necessidade de fazer é só pular para etapa 2. Agora vamos lá! Procure pelos códigos da área de sua postagem, como cada um usa um tipo de modelo procure por alguns desses códigos e veja qual é de sua área:

.post-outer {  ou .main-inner .column-center-outer {  ou .main-outer {

Encontrou? Agora se for personalizado copie todo o código até o final e cole em um bloco, vamos utiliza-lo depois. E apague tudo e no lugar cole:

Códigos
.post-outer { }

Agora procure pelo destacado em laranja:

Códigos
.post {
font-size: 13px;color: #9c9c9c;}

Para quem não saber essa tag é dos textos da postagem, apague os códigos entre as chaves (qual marquei em azul), e no lugar cole:


Códigos
font-size: 13px; ---/* tamanho de fonte */
color: #9c9c9c; ---/*  cor da fonte */
margin: 4px 2px 10px; ---/* espaço interno da postagem */
background:#fff; ---/* cor de fundo */
border: 1px solid #dec0c9;   ---/* borda*/
padding: 20px 10px; ---/* espaço entre postagens */ 

Verifique a pagina inicial e veja a área das postagens estão separadas e se os comentários está separado da caixa de postagem. Se não estive verifique se fez tudo certinho.

2. Procure por #comments { é abaixo dele cole:

Códigos
margin-top: 140px;

Salve! Agora dê uma olhada na caixa de comentários e veja se criou um grande espaço acima dele. Criou? Ótimo! Agora vamos ao próximo passo.

3.Se você usa marcadores no rodapé do blog, será necessário oculta-lo. Não se preocupe vai aparecer na pagina inicial, só vai ficar oculto ao abrir as postagens. Procure por  ]]></b:skin> e abaixo dele cole:

Códigos
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.post-footer-line-1{display:none}</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.post-footer-line-2{display:none}</style>
</b:if>

Se o seu marcador for abaixo do titulo, não tem necessidade de fazer.

4. Agora procure por  ]]></b:skin> e acima dele cole:

Códigos
.bio-autor{
width: 727px;
margin:37px 2px -150px -10px; ---/* espaço de dentro da bio */padding:5px 0 15px;
background: #FFFFFF; ---/* cor do fundo da autor */
}
.autor-avatar{
float:left;
margin:5px;
}
.autor-text{
color:#494949;  ---/* edite cor da fonte */
font-style:none;
font-size:12px;  ---/* tamanho da fonte do texto */
text-transform:none;
padding:5px;
margin-left:5px;
}
.autor-text p{
padding:0 auto;
margin: 0 auto;
text-align: justify;
}
.autor-text h3{
text-transform:none;
font-size:17px; ---/* Tamanho da fonte do título */
color:#777; ---/* edite cor da fonte */
font-weight:bold;
margin-top:-5px;
}
.autor-text a:link, .autor-text a:visited{
font-size:12px;
text-transform:none;
}

5. Agora salve e vamos para a segunda parte do código. Ainda dentro do HTML procure por:

Códigos
<div class='post-footer'>

Se tiver dificuldade para encontrar, procure apenas pela parte em vermelho.

Agora que encontrou abaixo dele cole:

Códigos
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;NOME-DO-AUTOR&quot;'>
<div class='bio-autor'>
<div class='autor-avatar'>
<img alt='Nome do Autor' height='75' src='ENDEREÇO-DA-IMAGEM' width='75'/>
</div>
<div class='autor-text'>
<h3>Sobre o autor</h3><p><b>Nome do Autor</b> Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 3 linhas. Se quiser coloque um link para a página do blog que fala mais sobre o autor. <a href='LINK'>Leia Mais sobre o autor...</a>
</p>
</div>
</div>
</b:if>
</b:if>

Agora é só salvar! Pessoal o modelo da postagem não está como a imagem da segunda ilustração, porque deixei como base para arrumarem de acordo com o gosto de vocês. Personalizado atrapalha a arrumar...

Observação 1: Nas áreas que está escrito nome do autor, deve ser  perfeitamente como o nome do autor é escrito no seu perfil, ou seja se tiver algum caractere especial , também deve coloca-los com o nome. Lembrando que a biografia só vai aparecer se estiver com o nome exatamente como o do perfil. Como também só vai aparecer nas páginas internas.

Observação 2: Para blogs que tenham mais de um autor/ postador,  deve incluir esse código mais de uma vez a partir do segundo código. Ele deve se repetir de acordo com a quantidade de postadores. Ex: Se seu blog tem 4 autores/postadores, deve inserir o código 4 vezes a partir do segundo código.

Observação 3: Utilize uma imagem com tamanho de no maxino 75x75 de tamanho, para cada avatar, se ultrapassar o tamanho vai aumentar assim deformando a bio. Não ultrapasse mais de 3 linhas falando sobre você, caso seja necessário, crie uma página estática falando um pouco mais de você e deixe o link no final da biografia. 

Observação 4: Fique claro que não dou 100% se certeza que o código vai funcionar em seu template, fiz teste em alguns modelos e funcionou em alguns como e em outros não. Então talvez seja o modelo ou algum código que dê conflito.

14 comentários:

  1. Olá o///////////
    Como vai bem? E a família ? E você? E o mascote ? E a vida ? ( Recuperando o tempo perdido) .
    Adorei o tutorial muito bem explicado , mas ainda sim eu prefiro o modo : Criar uma pagina. Eu acho mais simples por que se eu for fazer isso lá se vai meu dia ,não por ser difícil imagina , eu simplesmente tenho preguiça , mas anda usarei ok?
    Que bom que voltou , sei eu não comento muito , eu sou uma das famosas "Leitoras fantasmas" mas comentei , ou seja , não sou mais a fantasminha , EEEEEEEEEEEEEEEEEEE . Acho que é só , porém adorei o tutorial² , até a próxima .
    Talvez :p

    Kissis :* ////MW //////

    ResponderExcluir
    Respostas
    1. Hihi eu vou bem a família também, meus bichinhos estão levados e a vida está indo firme e forte, obrigada. E a sua como vai indo?

      Verdade realmente é mais simples é pratico. Hahah rapidinho se coloca coisa de 5 minutinhos, é mais o personalizar que leva uns minutinhos.

      Ahhh mais eu lembro de você o/ muito obrigada por gostar e comentar Lercy.

      Excluir
  2. Muito obrigado! Estou usando pro novo layout do meu blog e já estava com saudades de suas postagens por aqui ♥

    ResponderExcluir
    Respostas
    1. Onw Phil muito obrigada, agora que voltei vou postar sempre. :3 E tentar recuperar o tempo perdido, também estava com saudades daqui e dos meus leitores. :3 Muito obrigada pelo carinho! Ah quando estiver pronto o layout, me avisa vou amar ver.

      Excluir
  3. Nossa fico feliz que finalmente tenha voltado wendy senti muita falta do blog abraços. Adorei o tuto.

    www.avidadoguh.com

    ResponderExcluir
    Respostas
    1. Oiiie Guh puxa obrigada pelo carinho, fico realmente feliz por isso. Também senti muitas saudades.

      Excluir
  4. Esse tutorial é bem bacana vai me ajudar muito no proxímo layout :)

    www.avidadoguh.com

    ResponderExcluir
    Respostas
    1. Eu vou amar ver *-----------------------*

      Excluir
  5. T.T Estou tendo um problema, tem como me ajudar? Bom, o grande X da questão é que eu não consigo achar o .post{, de jeito nenhum, não consigo encontrar ele no layout. Acho que isso tem a ver com meu blog não ser separado em caixas, porém o modelo que eu uso já é assim, separado.

    ResponderExcluir
    Respostas
    1. Claro! Claro que ajudo. Pode me passar o link do seu blog para eu dar uma olhadinha? As vezes uns layouts realmente tem nome diferente, então eu vejo qual é o nome.

      Excluir
  6. Não deu certo, mas vamos partir pra outro tutorial^^
    Adivinha quem tá olhando todos os tutoriais daqui, sim euzinhaaa! :v ("quem diabos é essa louca?")

    www.weanilovers.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Poxa que pena... espero que de certo na próxima. Hihihi obrigada espero que goste dos tutoriais

      Excluir
  7. Não apareceu :(
    Criou o espaço e tudo, mas não apareceu nada escrito e nem meu avatar :(

    ResponderExcluir
    Respostas
    1. Oi Jojo você colocou seu nome no id? Se não colocou a área ficara vazia.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345