14 de novembro de 2011

8

Sobre o Autor no Final das Postagens ( Versão 1)


Olá pessoal, hoje iremos aprender a como colocar uma breve biografia no final das postagens aqui no Blogger. Esta será a 1ª versão que ensinarei a vocês, mas ao longo do tempo, irei apresentar a vocês mais Versões de Biografia dos autores, com mais personalizações.

Uma das vantagens do Wordpress, que oferecem para as pessoas que utilizam essa plataforma, é que se pode adicionar abaixo de cada post uma pequena biografia do autor. E muitos blogueiros que utilizam a plataforma do Blogger, gostariam de saber como podem adicionar este recurso ao seu blog.

O estilo abaixo, é o que está no utilizando Blogger. Mas pretendo mudar em breve.


Vamos ao tutorial:
- Acesse o Painel de Controle, e vá em "Design". (Modelo).
- Em seguida clique em "Editar HTML" e marque a opção "Expandir Modelos Widgets".
- Agora pressione as teclar CTRL+F e procure pela seguinte tag:
]]></b:skin>
- ACIMA da tag encontrada cole o seguinte código:
#post-footer-autor {
width: 100%;
height: 67px; /*Altura do campo autor do post */
background:
#1E90FF ; /* Cor de fundo */
margin: 8px 0px 8px 0px; /* Distancia das margens do campo do autor */
font-family: Geneva, Arial, Helvetica, sans-serif; /* Estilo de Fonte */
}
#autor-img { /* Estilo Avatar */
width: 54px; /* Largura do espaço para avatar */
height: 54px; /* Altura do espaço para avatar */
background: #fff; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Distancia das margens do avatar */
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{ /* Estilo texto da descricao */
font-size: 12px; /* Tamanho da fonte */
padding: 10px; /* Distancias do texto em volta do campo */
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;
}
#autor-sobre a{ /* Estilo texto linkado */
color: #9A9A9A; /* Cor link utilizado dentro do campo */
text-decoration:none; /* Sem algum efeito de destaque no link */
}
#autor-sobre a:hover { /* Estilo texto linkado ao passar mouse */
color: #9A9A9A; /* Cor link ao passar mouse */
text-decoration:underline; /* Sublinhado no texto ao passar mouse */
}
Obs: O texto destacado em negrito e que esta entre /*...*/ podem ser alterados. Para fazer as alterações, basta você souber o básico do CSS, de como mudar as cores e os tamanhos.
- Agora vamos procurar pela seguinte tag:
<div class='post-footer'>
- E ACIMA da tag encontrada anteriormente, cole o seguinte código:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;NOME DO AUTOR&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='URL_DA_IMAGEM_DO_AUTOR' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='autor-sobre'>
<p>
 DESCRIÇÃO DO PERFIL DO AUTOR
</p>
</div>
</div>
</b:if>

 </b:if>
  • NOME DO AUTOR:  Coloque exatamente o nome igual a do Perfil do Blogger. O nome deve ficar igual, se não o código não irá funcionar adequadamente. Ex: Na minha conta é usado Bruna T. Marques. Então devo colocar igual no código, como: Bruna T. Marques. Se fosse FuLaNNO, teria que colocar FuLaNNO no código.
  • URL_DA_IMAGEM_DO_AUTOR: Nesse "campo", você deverá colocar o link da imagem. Para isso vá na sua imagem, clique no botão direito em cima da imagem e clique em "Copiar endereço da imagem" ou algo semelhante assim. (Depende do seu navegador). O tamanho da imagem deverá conter os seguinte tamanhos 50px por 50px. (Não se esqueça de colocar o http:// no link da imagem).
  •  DESCRIÇÃO DO PERFIL DO AUTOR: Digite uma pequena biografia sua, no máximo com 3 linhas, não passe disso, se não irá passar do campo da descrição do autor. 
Obs: A parte que esta destacado em azul, se refere para deixar a biografia somente nas páginas internas e com isso, não aparecerá na página inicial do seu blog.

    - Depois clique em "Salvar Modelo".

    Estilo por Paulo Estevão com pequenas modificações por Utilizando Blogger

    8 Comentários:

    Diogo Harrison disse... [Responder Comentário]

    Oi Bruna. então, toda vez que eu to fazendo esse tutorial( umas 3 veses já) da um erro quando vou visualizar pra ver como ficou, diz que é um erro de html e tal... pra mim eu to errando na hora de editar o primeiro código, onde tem as partes em negrito: /*Altura do campo autor do post */

    Bruna T. Marques disse... [Responder Comentário]

    @Diogo Harrison, você marcou a opção "Expandir Modelos Widgets" em seu blog? Se você não marcar esa opção não dá certo, fiz os testes em 2 templates e ocorreu perfeitamente.
    Já no código do passo 4º as alterações são opcionais, não precisa alterar. Uma das partes mais importante para você alterar no código do passo 4ª é esse background: #1E90FF ; /* Cor de fundo */ pois se você quiser trocar a cor do fundo da caixa onde vai sobre o autor em seu blog, você deve trocar o Código HTML que é esse #1E90FF , esse código representa o fundo que é o Azul claro que esta representado na imagem ilustrativa. Caso queira ter uma tabela de cores para você escolher como fundo clique AQUI e sempre ao escolher uma cor copie o Código HTML e NÃO o Código Java.

    Diogo Harrison disse... [Responder Comentário]

    A entendi bruna, só uma coisinha.. tipo vou por o background branco, ai eu substituo o #1E90FF por #FFFFFF ou substituo o /* COR DE FUNCO */ por #FFFFFF ? o resto vo deixar como ta. vo testa aqui... até logo.

    Bruna T. Marques disse... [Responder Comentário]

    @Diogo Harrison, não somente o Código HTML que é #1E90FF e substitui por #FFFFFF. As palavras que estão entre /*...*/ não precisam ser alteradas, pois não afetará absolutamente em nada em seu template.

    Como você irá colocar o background branco em seu blog, você precisa trocar a cor do texto em seu blog, esse local esta representado por:

    text-align: justify;
    text-transform: normal;
    color: #fff;


    SUBSTITUA apenas esta parte → color: #fff pela cor desejada do texto, eu recomendo colocar a cor preta, então ficará assim:

    text-align: justify;
    text-transform: normal;
    color: #000000;


    E lembre-se ao colocar a sua foto edite-a antes para deixar no tamanho 50px por 50px. Se você tem o Windows 7, recomendo editar a sua foto no Microsoft Office Picture Manager, clique em "Editar Imagens..." e "Redimensionar" e tente colocar o tamanho de 50px por 50px.

    Feito isso, hospede a sua imagem no Dropbox , clique em "Log in" (caso não tenha uma conta ativa, clique em Create an account e faça a sua conta). Feito isso, clique em "Public" → "Upload"e clique em "Choose files" e selecione a sua foto e depois clique em "Start upload". Agora clique AQUI para ver a imagem de exemplo de como copiar o link de sua imagem já hospedada.

    Diogo Harrison disse... [Responder Comentário]

    Oi Bruninha, muito obrigado agora sim eu conseguir!!! valeu mesmo e obrigado pela paciência. veja como ficou no meu blog de teste: http://diogoharrisonblog.blogspot.com/ alem de ficarem dentro das postagens... eles ficaram na pagina inicial também. como corrijo? Obrigado.

    Bruna T. Marques disse... [Responder Comentário]

    @Diogo Harrison, dê uma olhada no código. Eu arrumei-o para mostrar a biografia do autor somente nas postagens internas. Basta você procurar pelo código do passo 6, e adicionar a parte destacada em AZUL.

    Izaque disse... [Responder Comentário]

    Bruna você pediu para colocar os créditos me desculpe por esquecer eu já coloquei

    http://mundosabetudo.blogspot.com.br/ (Angelo ) disse... [Responder Comentário]

    Adorei o tutorial

    Postar um comentário

    Parcerias são feitos em suas respectivas páginas.
    - Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
    Formulário de Contato
    - Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
    - Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

    Licença Creative Commons
    Free Page Rank Tool