Como adicionar informação do autor com imagem no blog

ESCOLA BLOGUEIRO>>  ADICIONAR INFORMAÇÕES SOBRE O AUTOR DA POSTAGEM NO BLOG.

Esse tutorial hoje é para ensinar a inserir informações do autor da postagem abaixo do post, com uma foto e uma pequena descrição. Se é um coisa que deixa o blog mais atraente com certeza é quando você acaba de ler um artigo e logo abaixo se depara com a foto e uma descrição do autor da postagem, se você tem o desejo de colocar em seu blog, mas não sabe como, essa é sua oportunidade, vamos ensinar hoje como colocar as informações do autor com a foto abaixo das postagens.

Vamos começar

1º – Acesse o Painel de seu Blog e clique em Design ou modelo.

2º – Agora clique no Botão Editar HTML, marque a caixa “Expandir modelos Widgets”.

3º – Agora pressione as teclas CTRL + F (Para abrir a barra de localização) e faça uma busca pelo a seguinte Tag:

]]></b:skin>

TENDO ENCONTRADO COLE ACIMA DELE ESTE CÓDIGO.

#Sobre-Autor {width:auto;border-color:#A8A8A8 #A8A8A8 #A8A8A8;border-style:solid;border-width:1px 1px thin;padding:5px 0 15px;}

#Sobre-Autor h3{font-family:arial;text-transform:none;font-size:16px;font-weight:700;font-family:&quot;text-shadow:1px 1px #fff;color:#004D97;padding:0 3px 4px 10px;}

.autor-avatar{float:left;margin:5px;}

.autor-text{color:#494949;font-style:none;font-size:12px;text-transform:none;margin-left:5px;text-shadow:1px 1px #fff;padding:5px;}

.autor-text p{text-align:justify;margin:0 auto;padding:0 auto;}

.autor-text a:link,.autor-text a:visited{font-size:12px;text-transform:none;color: #004d97;font-weight:700;}

.autor-text a:hover{color: #4b4b4b !important;}

 AGORA PROCURE POR ESTA TAG:

<div class='post-footer-line post-footer-line-3'>

 ABAIXO DELA 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='Sobre-Autor'>

<h3>Sobre o Autor:</h3>

<div class='autor-avatar'>

<img border='0' height='88px' src='URL DA IMAGEM DO AUTOR' style='border: 2px solid #ccc; padding: 0; margin: 0;' width='88px'/>

</div>

<div class='autor-text'>

<p>DESCRIÇÃO DO PERFIL DO AUTOR<br/> <br/>

</p></div></div></b:if></b:if>

O resultado vai ser  semelhante ao da imagem abaixo

Agora vamos as configurações, onde em negrito está escrito NOME DO AUTOR, você coloca seu nome como está no seu perfil, caso contrario pode dar erro.
Onde tem URL DA IMAGEM, você vai colocar a url da sua foto ou imagem que você queira que apareça.

Onde tem DESCRIÇÃO DO PERFIL DO AUTOR você irá colocar uma descrição sobre você, em seguida pode visualizar para ver  se não houve nenhum erro, estando tudo certo pode salvar, agora abra uma postagem e veja o resultado.
OBS.. muito cuidado na hora de colocar nome do autor, url da imagem e descrição do perfil, se apagar uma aspa vai dar erro.

Mas se seu blog tem dois ou três autores, você também pode colocar informações para eles também, siga os paços abaixo.


Você irá seguir os passos citados acima, procura por <div class='post-footer-line post-footer-line-3'>
E logo abaixo dela você cola o seguinte código, e faz as alterações colocando as informações do segundo autor, caso tenha mais autores siga os mesmos passos sempre alterando as informações.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;NOME DO AUTOR 2&quot;'>

<div id='Sobre-Autor'>

<h3>Sobre o Autor:</h3>

<div class='autor-avatar'>

<img border='0' height='88px' src='URL DA IMAGEM DO AUTOR 2' style='border: 2px solid #ccc; padding: 0; margin: 0;' width='88px'/>

</div>

<div class='autor-text'>

<p>DESCRIÇÃO DO PERFIL DO AUTOR 2<br/> <br/>

</p></div></div></b:if></b:if>

Sempre visualize antes de salvar, as vezes você pode ter cometido algum erro e, se salvar vai ter dores de cabeça para resolver o problema, tendo visualizado, se tudo estiver perfeito pode salvar.


Termos de buscas.
Como adicionar informações do autor.
Adicionando informações do autor.
Como adicionar informações do autor com imagens.
Adicionar informações do autor no blog com foto e descrição.