12/27/2014

Avatar Do Autor Ao Lado Do Título Da Postagem.

~Hi meus bolinhos estou aqui de novo,sentiram minha falta?Aposto que sim -sou muito convencida né-Então hoje estou trazendo ao Café Com Baunilha mais um Goodie e tutorial super personalizado e que vai deixar seu blog muito mais fofo e personalizado!!E o tutorial original é do blog Bunny Crazy.
                                                
~Hi de novo meus bolinhos,como estão?Nossa hoje a tarde está um calor aqui em São Paulo nem consigo escrever direito minha mão tá toda suada,mas tomei um banho geladinho e já me refresquei U.U.Então como vocês leram na explicação ali em cima eu vou ensinar a vocês a como colocar o avatar (ou seja a foto) do autor ao lado do título do post,fica personalizado e mega fofo!!
Vamos ao passo-a-passo??

Vá em modelo>>clique em editar HTML>>e aperte os botões Ctrl+f e vai abrir um caixa de pesquisa,então pesquise por:
</head>
Depois que achar cole isso acima do código achado:
 <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 cole esse código abaixo acima do código procurado:
 <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
Ainda em editar modelo pesquise por :
]]></b:skin>
E quando achar cole esse código abaixo acima do código procurado:
 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.
 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.Agora ai abaixo tem alguns códigos para você escolher como que quer seu avatar.


Modelo 1-Efeito 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;
}
 
Modelo3-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;
}
E ai deu certinho no seu blog??Espero que sim,estou na torcida!!Muito obrigado por entrar aqui,mais aproveita e já segui o nosso blog afinal assim toda hora que nós postarmos algo você receberá em primeira mão!!E se usar credite hein meus bolinhos.
~Kisses Bolinhos

4 comentários :

  1. Nossa Vick valeu mesmo eu tava louca procurando esse tutorial

    ResponderExcluir
    Respostas
    1. Obrigado mesmo anônimo,numa certa época eu era louca achar tal tutorial e sei bem como é isso!
      ~Ayumi

      Excluir
  2. Putz Vick tava louca procurando esse tutorial,só você mesmo vick Obg

    ResponderExcluir
    Respostas
    1. Hahaha aqui vocês iram encontrar de tudo!
      ~Kisses

      Excluir