4.05.2013

Efeito ''instagram'' para seus afiliados sem usar editor apenas css!


Olá meus pão com polenta, tudo bom?. Só para esclarecer algo, eu AMEI receber um ''tudo bom'' de vocês, na boa eu tenho os melhores leitores. Cara eu nunca pensei que vocês iriam amar igual eu amei as obras do Erik mas o cara merece MUITOS reconhecimentos né! Vamos mudar de assunto? Emfim eu não estou com muito tempo para escrever uma coisa diferente então vamos aprender a deixar as suas fotos de elite afiliados, autores, e coisas do blog em geral com um efeito tipo instagram. É simples e só usa CSS!


* vocês entenderam né?No hover ele simplesmente vira aquele efeito ''fake'' tipo Photoscape.

Vá no seu editor de HTML do blog e aperte Ctrl+F> nessa janelinha que se abriu cole essa tag '']]></b:skin>'' acima dessa tag cole o código abaixo:
.tagram{
border-top:solid 9px #eee;
border-bottom:solid 9px #eee;
-webkit-filter: opacity(0.8);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.tagram:hover{
border-top:solid 9px #000;
border-bottom:solid 9px #000;
-webkit-transform:scale(1.010) ;
-moz-transform:scale(1.010) ;
-o-transform:scale(1.010) ;
box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
-moz-box-shadow:0px 0px 5px #000;
opacity: 1;
-webkit-filter: grayscale(0.2) saturate(1.2) sepia(0.4);
}
Entenda o código: o que está em negrito é a cor da borda quando ele não está no hover e o que está em itálico é a cor da borda quando se passa o mouse (hover), troque usando essa tabela [www].

Agora va em Layout > Adicionar Gadget > procure pelo de HTML/JavaScript e cole essa código abaixo na janelinha:
<a href="Link do blog"><img class="tagram" height="60px" src="Link da imagem" width="60px" /></a>
Entenda o código: O que está em negrito é o tamanho da imagem troque se quiser.

Bem pessoas é só isso, vamos combinar né sexta feira não é um dia para se ler aqueles posts enormes e na real isso deveria ser uma lei. Emfim se usar o código de os créditos nem vai cair a sua mão. Até amanhã e amanhã eu acho que vou postar alguns micos porque eu quero compartilhar alguns que estão aqui FAZ TEMPO. Até mais! Votem na enquete ao lado.

14 comentários:

  1. Otimo o efeito *0*

    Serio viu ,' tenho qe usar mas a onde . Ru ainda num sei ;$

    Ps; Eu to muito brm . Obg u-ú

    garotaperigosa.blogspot.com

    ResponderExcluir
  2. Ai que showw


    http://simplesmenteassimj.blogspot.com.br/

    ResponderExcluir
  3. Ai, eu amo esse efeito nos seus afiliados. Valeu pelo tutorial, tenho certeza que ajudará muitas pessoas! =D

    NOSSO CAPRICHO
    apsmass.blogspot.com

    ResponderExcluir
  4. Oii, esse efeito nos afiliados é somente PERFEITO, O tutorial ficou muito shoow *--*

    >amoraazeda.blogspot.com<

    ResponderExcluir
  5. Hahha, verdade, sexta feira não é dia de posts enormes, é dia de ver filmes/séries e ficar no Twitter caso não saia. Adorei o tuto, fica um efeito muito legal :) Adoro seus tutoriais

    Beijos ♡
    Sim Senhorita (Clique aqui ou no perfil)
    @SiimSenhorita

    ResponderExcluir
  6. Que legal esse “efeito Instagram“ *u* nunca tinha visto nada parecido, vou ate salvar nos favoritos para o caso de precisar em futuros próximos layouts haha.

    Beijos ♥

    ResponderExcluir
  7. Ola, eu to bem sim :)
    Bom eu ja votei na enquete ai do lado, ameii o efeitoo gostei mesmo!!
    adotadospelopai.com.br

    ResponderExcluir
  8. Olá, gostaria de me afiliar ao JOVEN CLUBE, aceita? Responde lá no meu blog!
    >>>nateeladopc.blogspot.com.br

    ResponderExcluir
  9. Gente,seus tutos sempre são perfeitos.Esse efeito fica lindo!

    www.em-teusbracos.blogspot.com

    ResponderExcluir
  10. a.m.e.i!
    super lindo este efeito! :D
    amoraazeda.blogspot.com

    ResponderExcluir
  11. adorei o efeito,lindo...
    bju

    http://aieuvivantagem.blogspot.com.br/

    ResponderExcluir
  12. M.Campello gostaria de me afiliar ao JOVEN CLUBE, as vagas estão abertas ?
    responde >>nateeladopc.blogspot.com.br<<

    ResponderExcluir
  13. Ah, que legal *-* É um efeito diferente :)
    Gostei ;)
    Abraço.
    http://blog-part-of-me.blogspot.com.br/

    ResponderExcluir

É o seguinte...
x Comente se você REALMENTE leu o post;
x NUNCA PEÇA para eu seguir deu blog de volta eu sempre visito, e seu eu gostar com certeza irei seguir;
x As tags são respondidas em um ''post'' privado geralmente anexadas em um servidor;
x Repeito os outros e eu, se quiser criticar critique!
Até e obrigado pela visita XOXO :)