Adicionar Autor no final dos post

Eu vi muitas pessoas querendo este codigo para colocar em seus blog, então eu vou mostra uma maneira bem simples de colocar.
O codigo mostra sobre o autor do blogger como se fosse uma biografia.



Então vamos lá.

1)Primeiro passo : Colocar o CSS na skin do blogger.

Entre em , (Designer),Depois Editar Html e Procure pela tag b:skin

E adicione este codigo acima dela.


.bio-autor{margin:10px 2px 20px 2px;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;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;}

Depois va em salvar!

2)Segundo passo : Colocar biografia do autor.

Procure por este codigo abaixo :

<div class="post-footer">
E logo abaixo do codigo encontrado adicione:

<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>

Pronto

Obs: 

1) Utilize uma imagem com tamanho máximo de 75px e largura máxima de 75px, para o avatar do autor.
2) Recomendo que o texto com a biografia do autor não tenha mais que 3 linhas, para que não fique extenso demais.
3) Se quiser coloque um link para a página do blog que fala mais sobre o autor.
Previous
Next Post »