03/11/2014

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!

34 comentários:

  1. Oi Wendy =w=
    Estava procurando como fazer isso e achei aqui agora, uhuuuu
    Infelizmente muitos dos códigos não estou achando no modelo, ou seja, não consegui modificar :(
    Mas gostei mesmo assim, beijões~

    blogcoisinhasorientais.blogspot.com
    Kim

    ResponderExcluir
    Respostas
    1. Yo, Yo! Como vai? Puxa que pena...mas você não clocou espaço antes ou depois das palavras? Pois esses trechos de código existem em todos os templetes. Tenta fazer de novo, se não der certo me avise para que possa lhe ajudar. ^^
      Mas muito obrigada por gostar do tutorial, beijinhos.

      Excluir
  2. Nossa, não sei como você descobre essas coisas! Mds, eu sou péssima em mecher nessas coisas de HTML heuehuehe Amei o tutorial, com certeza vou usar no meu próximo layout ♥♥
    Kiss || Kawaii People

    ResponderExcluir
    Respostas
    1. Hihi saçaricando por ai e também com ajuda de alguns miguxos. Mas usa sim ficará lindo, tenho certeza. Assim que usar me avise pois quero ver como irá utilizar *-----* avisa, né? Beijinhos~

      Excluir
  3. o primeiro codigo do script ta dando erro :c , nao da para salvar ...

    ResponderExcluir
    Respostas
    1. Hmm... entendo vou fazer três perguntinhas para poder entender melhor.
      Está colocado acima do /head? Qual erro aparece, poderia tirar um print para mim ver melhor? E qual modelo de template você utiliza? Aguardo sua resposta.

      Excluir
  4. Amei o tutorial, super bem explicado, e fica lindo. Eu colocaria, mas não tenho saco (literalmente) para essas coisas.

    The Lord of Thrones

    ResponderExcluir
    Respostas
    1. Obrigada por gostar do tuto. Hihi eu lhe entendo. ^^ Beijokas.

      Excluir
  5. Olá! Gente que tutorial divo *--*. Sempre vi esse efeito no blog e é uma fofura. Dá um toque todo único. Esses efeitos são lindos, amei o 3. Vou usar no meu próximo layout. Tutorial perfeito ♥

    ~XoXo, Cat In My Coffee

    ResponderExcluir
    Respostas
    1. Também acho esse tutorial super show, realmente dá um toque diferente ao blog. Use sim, vai ficar lindo! Quando usar me avise, vou amar ver como utilizou.

      Excluir
  6. Casa comigo Wendy?? Muito obrigada por postar esse tutorial <3
    Estava me matando pra achar esse tuto, mas vc salvou minha vida <3
    Obrigada ^.^

    Kissus | http://c-omebackhome.blogspot.com/

    ResponderExcluir
    Respostas
    1. Hihi claro!!!! o/ Que isso não foi nada é um prazer poder ajudar em tudo que precisam. Realmente é difícil achar... mas agora está aqui para vocês.

      Excluir
  7. Tá dando erro T^T no primeiro code....
    Me ajuda.

    ResponderExcluir
  8. Deu certo! eeehhh
    Mas e se tiver mais um postador??

    ResponderExcluir
    Respostas
    1. Weeee que booom!!! Ah, não precisa se preocupar entra automaticamente, fiz o teste e apareceu de ambos postadores com perfil diferente. Lembrando que a imagem que vai aparecer e a mesma do perfil do Google.

      Excluir
  9. Super adorei, quando mudar o lay novamente vou tentar usar, rsrs. Posso fazer um pedido de postagem, rsrs. Bem como moro no sul e tals (no interior) sempre fica bem dificil de comprar artigos de k-pop, faz uma postagem indicando alguns sites que vendam? Obrigadão. :)

    ResponderExcluir
    Respostas
    1. brigada miguxa, ficará lindo com certeza. Faço sim, com toda certeza logo, logo eu postarei. ^^

      Excluir
  10. Amei esse tutorial Wendy, faz tempo que procuro esse tutorial e nunca acho :v adorei ele, com certeza vai ficar bem legal no meu próximo layout. Beijos.

    strawberrym-ilk.blog

    ResponderExcluir
    Respostas
    1. Weee que bom! Fico feliz em poder ajudar, se der erro me avise para poder lhe ajudar.

      Excluir
  11. Se fosse pra colocar me baixo é tipo o mesmo esquema quase né, rsrs, meio que sempre quis colocar no final da postagem.

    ResponderExcluir
    Respostas
    1. Miguxa desculpe eu não entendi muito bem sua pergunta. Você está querendo dizer mini biografia abaixo da postagem?

      Excluir
  12. Wendy está dando um erro, na linha do "//<![cdata[", não está reconhecendo ou alguma coisa assim... O post é muito útil pena que não estou conseguindo instalá-lo :(

    ResponderExcluir
    Respostas
    1. Linda qual é o modelo que você usa? Poderia me dizer?
      Experimenta colocar o código do ]] abaixo do .mobile

      Excluir
  13. O meu ta dando erro no primeiro código T.T Eu queria tanto esse perfil

    ResponderExcluir
    Respostas
    1. Experimenta testar em outro blog que não esteja com alterações de código. As vezes pode ser um código que esteja dando conflito.

      Excluir
  14. Está dando erro no primeiro código, na linha //<![cdata[
    Eu uso o modelo travel

    Queria muito esse gadget

    ResponderExcluir
    Respostas
    1. Quando colocar o código de um espaço dele para o código de cima e de baixo. Eu fiz o teste e funcionou.

      Excluir
  15. Oi, estava atrás desses tutorial faz tempo *_* porém no meu não quer funcionar, já testei com todos os modelos do blogger e alguns que modifiquei, da sempre o mesmo, está acontecendo isso:

    Letras em vermelho acima da caixa escrito...

    "Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 641, coluna 5: The content of elements must consist of well-formed character data or markup. "

    e dentro da caixa aparece marcado ele toda vez:
    //<![cdata[

    Teria como me ajudar? O que estou fazendo de errado?
    bjo

    ResponderExcluir
    Respostas
    1. Sim eu compreendo, eu sempre coloquei e nunca deu erro, mas dias atrás ocorreu comigo e é bem fácil de se resolver. Quando colocar o código de um espaço dele para os outros de cima e de baixo.

      Excluir
  16. Anônimo4/2/15

    Amei o tutorial, fica lindo e você explica super bem! Xoxo

    ResponderExcluir
  17. Anônimo5/7/16

    Hey Wendy, amei o tuto. Mas, uma perguntinha: o perfilzinho só aparece quando o blog estiver no público?

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345