Avatar do autor ao lado do post

Olá meus anjos tudo bem? o(^∀^*)o Como vão? Eu se por acaso quiser saber, eu estou um caco de tão cansada, sai de casa as 7:40 e fui chegar em casa depois das 22:00 estou bem cansada mesmo afinal fazia tempo que não andava como andei hoje haha. Essa semana parece que deu tudo errado, perdi várias vagas de emprego na área que estou estudando e isso me deixou péssima, uma porque perdi a carteira de trabalho, e outra porque fui atrás ver e fazer outra e pode demorar de 5 a 10 dias para chegar. Pois é, irei voltar de férias e terei que continuar onde estou que não é a área que tanto quero ( Ĭ ^ Ĭ )  Fazer o que, o jeito é esperar a outra carteira chegar ′︿‵｡

Mas então, acho que me pediram este post uma década atrás e na época que me pediram eu lembro que não postei porque estava com aquela frescura de não postar nada do tema atual e acabei não postando depois porque esqueci. Até peço desculpas por isso, hoje em dia to pouco me lixando por efeitos ou qualquer coisa que eu use nos meus layouts, se alguém me pedir eu posto mesmo, aquele tempo de frescura não existe mais e que ridículo da minha parte isso Argh. Mas acredito que são tudo fases nas nossas vida né? Haha, me desculpem mais uma vez e se alguém tiver alguma vontade de algum efeito meu dos meus layouts podem pedir tá? Vamos ao tutorial? o/

LIVE PREVIEW σ(≧ε≦ｏ)

Salve o seu modelo antes de fazer as modificações certo? Vá até o seu modelo e clique em editar html, dentro procure por: <a expr:name='data:post.id'/>  Não é o primeiro código é o segundo, depois que acha-lo copie o próximo código e cole abaixo dele.

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

<span class='author'><img src='LINK DA IMAGEM'/>

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

<span class='author'><img src='LINK DA IMAGEM'/></span>

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

<span class='author'><img src='LINK DA IMAGEM'/></span>

</b:if>

Onde está escrito NOME DO AUTOR é onde vocês irão por os nomes dos autores que irão moderar o blog, caso seja só um coloque só o seu nome do perfil do blogger, tem que estar exatamente como no seu perfil com símbolos, números ou o que for se não o avatar não irá aparecer certo? 

Para mostrar o avatar e por efeitos nele, vá até o modelo de novo e procure por: ]]></b:skin> e acima dele cole o seguinte código:

/*-Efeito nos autores de posts por gnmh*/
.author img{
widht:50px;
height:50px;
padding: 2px;
float: right;
margin-right: -75px;
margin-top:-12px;
opacity: 0.9;
outline: 1px solid #fff;
outline-offset: -2px;
background: #FFF;
border: 2px solid #ebe7d9;
box-shadow: inset 1px 1px 0px #fbfaf6;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition:all 1s;
}
.author img:hover {
opacity: 1;
outline: 1px solid #E6D6EB;
outline-offset: -40px;
background:#D9CEE3;
border: 2px solid #ebe7d9;
box-shadow: inset 0 0 6px #D4E3E8, 0px 1px 1px #D4E3E8;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Vocês irão pode modificar tudo, o tamanho da imagem, as cores do background, os efeitos e as margens, modifique até ficar ao seu gosto e caso queira a imagem no lado esquerdo da postagem onde está FLOAT: RIGHT; vocês irão mudar para FLOAT: LEFT; e edite as margens até se alinhar.