Avatar do Autor ao Lado do Título do Post

Ai,gente eu vou falar uma coisa: como nós estamos de férias e as aulas vão começar em fevereiro, então eu estou acordando 1 hora ou mais tarde :3 é que agente está de férias e quero aproveitar o máximo kkk. Fui visitar o blog Bunny Crazy e vi um tutorial bem legal, sobre como colocar o avatar do autor ao lado do título do post, de várias formas como redondo,quadrado e com efeitos hover!

Vamos lá!!

Vá em HTML depois procure por  </head>, agora cole o código abaixo antes da tag:

<script>//<![cdata[function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}//]]></script>

Agora procure por <b:if cond='data:post.title'> e acima cole o seguinte código:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

Dentro de cada template existe dois códigos desse ou mais, cole acima do segundo código que encontrar. Ou em todos para não haver complicações, não se preocupe não acontecerá erros ou conflitos no seu código de template.

Ainda dentro do Modelo, procure por  ]]></b:skin> e acima cole:

.avatar-author {
float: left; /* mude para right ou left dependendo do seu modelo*/
width: 40px; /* mude para a largura que você quer que tenha a imagem */
height: 40px; /* mude para a altura que você quer que tenha a imagem */
} 

Agora é só personalizar como desejar. Lembrando as imagens dos avatares são as mesmas do perfil do Google, mas pode arrumar o tamanho delas no código de personalização. A Whendy ez alguns modelos super lindos para os seus avatares ficarem perfeitos!!

                                                                     
                                                           Modelo1 (Efeito de bordas + Hover):

                                                                  .avatar-author {float: left; /* mude para right ou left dependendo do seu modelo*/width: 36px; /* mude para a largura que você quer que tenha a imagem */height: 36px; /* mude para a altura que você quer que tenha a imagem */border: none;  /* nao mexa */padding: 2px; /* nao mexa */margin-top: 14px; /* arrumar se necessario */margin-left: -55px; /* arrumar se necessario */background-color:#bfcaa2; /* cor de fundo */outline: 1px solid #b1c6b5;outline-offset: -5px;-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;-webkit-transition:all 1s;}.avatar-author:hover {float: left; /* mude para right ou left dependendo do seu modelo*/width: 36px; /* mude para a largura que você quer que tenha a imagem */height: 36px; /* mude para a altura que você quer que tenha a imagem */border: none;  /* nao mexa */padding: 2px; /* nao mexa */margin-top: 14px; /* arrumar se necessario */margin-left: -55px; /* arrumar se necessario */background-color:#bfcaa2; /* cor de fundo */outline: 1px solid #b1c6b5;outline-offset: -21px;-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;-webkit-transition:all 1s;}

       

                                                                 
                                                           Modelo 2 (Redondo + Hover):                       

                                                  .avatar-author {
float: left; /* mude para right ou left dependendo do seu modelo*/
width: 50px; /* mude para a largura que você quer que tenha a imagem */
height: 50px; /* mude para a altura que você quer que tenha a imagem */
border: none;  /* nao mexa */
padding: 2px; /* nao mexa */
margin-top: 14px; /* arrumar se necessario */
margin-left: -55px; /* arrumar se necessario */
border: 2px solid #544465; /*borda */
background-color:#ea7373; /* cor de fundo */
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition:all 1s;
}
.avatar-author:hover {
float: left; /* mude para right ou left dependendo do seu modelo*/
width: 39px; /* mude para a largura que você quer que tenha a imagem */
height: 39px; /* mude para a altura que você quer que tenha a imagem */
border: none;  /* nao mexa */
padding: 2px; /* nao mexa */
margin-top: 14px; /* arrumar se necessario */
margin-left: -55px; /* arrumar se necessario */
background-color:#544465; /* cor de fundo */
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition:all 1s;
}

                                                             
                                                             Modelo 3 (Meia bola):

                                                    .avatar-author {float: left; /* mude para right ou left dependendo do seu modelo*/width: 40px; /* mude para a largura que você quer que tenha a imagem */height: 40px; /* mude para a altura que você quer que tenha a imagem */border: none;  /* nao mexa */padding: 2px; /* nao mexa */background-color:#ea7373; /* cor de fundo */margin-top: 14px; /* arrumar se necessario */margin-left: -55px; /* arrumar se necessario */-webkit-border-top-left-radius: 45px;-webkit-border-bottom-left-radius: 45px;-moz-border-radius-topleft: 45px;-moz-border-radius-bottomleft: 45px;border-top-left-radius: 45px;border-bottom-left-radius: 45px;}

                                                               
                                                 Modelo 4 (Simples opacidade + Hover):

                                                                .avatar-author {
float: left; /* mude para right ou left dependendo do seu modelo*/
width: 36px; /* mude para a largura que você quer que tenha a imagem */
height: 36px; /* mude para a altura que você quer que tenha a imagem */
border: none;  /* nao mexa */
padding: 2px; /* nao mexa */
margin-top: 14px; /* arrumar se necessario */
margin-left: -55px; /* arrumar se necessario */
background-color:#ea7373; /* cor de fundo */
opacity: 0.3;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition:all 1s;
}
.avatar-author:hover {
float: left; /* mude para right ou left dependendo do seu modelo*/
width: 36px; /* mude para a largura que você quer que tenha a imagem */
height: 36px; /* mude para a altura que você quer que tenha a imagem */
border: none;  /* nao mexa */
padding: 2px; /* nao mexa */
margin-top: 14px; /* arrumar se necessario */
margin-left: -55px; /* arrumar se necessario */
background-color:#ea7373; /* cor de fundo */
opacity: 0.9;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition:all 1s;
}

-