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 σ(≧ε≦o)

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.
Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

4 comentários:

  1. Oi minha querida vakenha <3
    Também estou morta, lembra da minha vida fitnnes? Ainda está de pé pelo incrível que pareça ueheuheuhe'
    Mas enfim, eu sempre procurei por esse tutorial, acho tão fofo o avatar do ladinho <3
    Roh salvando vidas ~
    ~nunca feche esse blog pelo amor de deuos~

    Beijos! Leadership ♡

    ResponderExcluir
  2. Oii o/.
    Eu estou bem, e você? Cara, eu procurava esse tutorial a dias! E não achava em lugar nenhum, e agora eu finalmente o encontrei \o/. Eu acho que fica uma fofura o avatar do autor no lado do post ♥, e também fica mais fácil em saber quem postou! Adorei o tutorial ♥, vou tentar mais tarde!
    Kisses candy ♥ l http://candycherry-bynate.blogspot.com.br/

    ResponderExcluir
  3. É muito fofo! Eu já tinha visto antes e queria muito ter igual no blog, acabei de ver no meu lay e tem espaço suficiente para usar, vou testar no blog de teste, pois é muito fofo ele ♥

    Pietra DeLuna | http://vanillaegeek.blogspot.com.br

    ResponderExcluir
  4. Eu sempre achei muito lindinho isso de foto do autor do lado do post <3 É difícil encontrar um tutorial assim, mas a Roh tá muito lacradora esses dias e não para de postar tutorial mega útil e lindos c': Arrasa, coração ♥

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017