Avatar do autor ao lado do título da postagem (ao lado da postagem)

Yo bunnies, como vão? Hoje trago uma postagem que me pediram a bastante tempo, mas nunca tive tempo e oportunidade para postar... pois o código que eu utilizava dava conflito em alguns modelos de templates e decidi não postar, pois haveria muitas reclamações. Mas recentemente encontrei um tutorial que deu certo e até muito melhor do que eu usava que era obrigatório colocar o nome imagem etc... Nesse código a imagem do avatar entra automaticamente, ou seja a imagem que estiver em seu perfil do google. Além do efeito title que não funcionava no meu código anterior, eu aproveitei e fiz alguns códigos com efeitos e vocês podem escolher. Então vamos lá?

Primeiro Modo

(Imagem capturada do BC Layout Wa)

1. Vá até a pagina chamada Modelo > (Botão cinza) Editar HTML. Depois que abrir os códigos procure pela tag </head>, a pois achar acima dela cole:

Códigos

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

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

Códigos

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

3. 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:

Códigos

.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. Como sempre me empolgo um pouco com códigos preparei alguns modelos quem quiser pode utilizar e modificar.

Modelo1 (Efeito de bordas + Hover):

Códigos

.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):

Códigos

.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):

Códigos

.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):

Códigos

.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; }

Segundo Modo

Esse modo é bem mais pratico e rápido que o primeiro. É uma boa opção caso o primeiro modo não tenha dado certo no seu blog. Nesse modo é possível aplicar a imagem de avatar que desejar, ele não utiliza a do seu perfil Blogger ou Google+.

1. Vá até a pagina chamada Modelo > (Botão cinza) Editar HTML. Depois que abrir os códigos procure pela tag <b:if cond='data:post.title'>, acima dela cole:

Códigos

<img src="endereço da imagem" width="largura" height="altura" alt="Avatar" style="float:left;margin:0 5px 5px 0" />

2. Salve e visualize, veja se gostou caso não é só remover os códigos adicionados.  Se no seu blog tem mais de um postador, você poderá usar uma vatar diferente para cada um. Basta adicionar um código extra por volta da imagem, como neste exemplo, que mostra uma figura específica para as publicações de cada um, exemplo "Maria" ou "Joana", é só aplicar o nome do postador. Mas precisa ser exatamente a que tal pessoa utiliza para postar:

Códigos

<b:if cond='data:post.author == "NOME AQUI"'><img src='IMAGEM' height='50' width='60' alt='Avatar'/></b:if>

É só isso espero que tenham gostado!