6.07.2013

Efeito ''mirror'' para seu blog - nível super fácil!


E ai meus leitores preferidos, tudo bom?. Ta 2 dias sem postar é meu record ou o que? Na boa eu não to gostando disso acreditem mas eu tinha muita coisa pra fazer e quando eu digo muita coisa eu quero dizer escola então se quiserem (vocês devem) podem culpar ela e não a mim. Fiquei muito feliz quando eu cheguei hoje e vi os comentários tipo muitos adoraram e eu adorei isso porque na real o tédio é a prima mais chata e menor da chatice,e eu gostei de ver o que muitos relataram o que fazem fazem quando o tédio esta em nossas vidas. Bem mas agora assunto do dia é: Tutorial que eu mesmo fiz e é a coisa mais fácil do mundo basta acompanhar tudo abaixo e você conseguira fazer. Vamos lá!

Se você quiser aprender como se faz esse efeito vá no seu editor de HTML do blogger e aperte as teclas ''CTRL+F'' juntas. Abrirá uma pequena caixa de pesquisa dentro do editor de html e nela cole essa tag: '']]></b:skin>'' e acima dessa tag cole o código abaixo:
.mirror{
transition:All 0.6662s ease;
-webkit-transition:All 0.6662s ease;
-moz-transition:All 0.6662s ease;
-o-transition:All 0.6662s ease;
-webkit-filter: none;
border:solid 2px #635C4D;
-webkit-filter: grayscale(0.5);
}
.mirror:hover{
outline: 1px solid #ffffff;
-webkit-filter: none;
-webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
-webkit-transition-duration: .9s;
outline-offset: -7px;
}
Entenda o código acima: Tudo que está em negrito, são as cores das bordas e tudo mais, e o que está em itálico são os tamanhos das bordas mude se quiser, e use essa tabela como base [www].
Depois de ter feito a mudança que você deseja vá em: Layout e clique em ''adicionar gadget'' e procure pelo HTML/JAVASCRIPT e come o seguinte código:
<a href="LINK"><img class="mirror" height="60px" src="LINK DA IMAGEM" width="60px" /></a>
É isso galera e ai gostaram? É um efeito meio bobo e super fácil de fazer e usar confesso eu tinha ficado com ciumes dele porque ele é bem legal né essa coisa de reflexo e tudo mais, só avisando eu trouxe esse tutorial aqui porque é muito chato só um blog que fala de uma coisa então eu procurei diversificar e deixar uma coisa mais leve para essa sexta feira! Até mais.

27 comentários:

  1. Uhull!!Adorei o post,mas não sei fazer essas coisas (como sou meega inteligente *_*)
    Beijinhos

    mundo-desonhadores.blogspot.com

    Tem vagas para afiliados???:)

    ResponderExcluir
  2. Adorei o tutorial, esse efeito é show
    beijos

    ResponderExcluir
  3. Matheus não tem como colocar esse efeito em todas as imagens do blog? :3
    A escola é uma Sra. Chatice mesmo... u_u'
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode

    ResponderExcluir
  4. Que legal esse efeito, nunca tinha visto efeito parecido com esse antes. U-U

    Ocê tá muito ocupado com a escola? Pior eu, que vou começar a ter simulados semana que vem e amanhã vou ter que acordar antes do dia amanhecer pra vender coisa na feira pública. :S Tudo pela escola... q

    XOXO, Josh. | the-andddreams.blogspot.com

    ResponderExcluir
  5. esse efeito é mais que perfeito, amei.
    Connectadus.blogspot.com

    ResponderExcluir
  6. efeito bobo nada, é um efeito lindo, nunca vi algum efeito parecido u.u
    Pequena Garota

    ResponderExcluir
  7. Efeito é muito lindo, adorei o tutorial...
    Comentário fixo: Desculpa não comentar aqui esses dias, o blog estava fechado para mudanças , agora está com uma "cara nova" se puder dá uma conferida no blog ...
    Beijos, Ariane- diariodostreze.blogspot.com

    ResponderExcluir
  8. uowww muito legal esse tutu, fica bemmm legal


    simplesmenteassimj.blogspot.com

    ResponderExcluir
  9. Super legal esse efeito. Talvez eu use no meu próximo layout.
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  10. Oii retribuindo a visita! o tuto é mt pratico e fica de maais! adorei

    Post Novo visita? ~> feriasde-outono.blogspot.com.br/
    Fã Page Curti? https://www.facebook.com/pages/F%C3%A9rias-de-Outono/401291603276100

    ResponderExcluir
  11. O efeito fica muito legal,ótimo tuto. ^.^ AMEI A IMAGEM DE INÍCIO DE POST,#morri.

    www.em-teusbracos.blogspot.com

    KISSES ♥

    ResponderExcluir
  12. Nossa você é bom em css einh?! lindo o efeito..
    onandoffoficial.blogspot.com

    ResponderExcluir
  13. ótimo tutorial!!!
    Amo seu blog <3
    Beeijinhoos!
    http://girlswithstyles.blogspot.com.br/

    ResponderExcluir
  14. O efeito é realmente lindo *O*
    Gostei do tutorial, parabéns!
    Beijos,
    Sonhos de Primavera // Um novo recomeço.. ;)

    ResponderExcluir
  15. Efeito super bacana, e tutorial bem fácil de aprender, gostei.
    http://realidadecaotica.blogspot.com.br/

    ResponderExcluir
  16. Bem legal o efeito!
    Beijo, Lili
    Princesa Teen / Layout novo e novidades.
    Receitinha! / Assista! Se inscreve e divulga!

    ResponderExcluir
  17. Que layout perfeito esse seu ! omg, que perfeeito : O
    tô morrendo de invejinha aqui >< s2

    Parabens.

    ilovestarandbooks.blogspot.com

    ResponderExcluir
  18. amei o tutorial,e o efeito fica lindo.
    seguindo

    querida-adolescenciaa.blogspot.com

    ResponderExcluir
  19. Era o tutorial que eu queria *0000*
    Esse efeito é mais que divo, é super ultra mega divo, vou usá-lo ! UASHAUS'
    Beijos <3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Este comentário foi removido por um administrador do blog.

      Excluir
  20. Lindo tutorial chuchu, adorei. (:

    haysahass.wordpress.com

    ResponderExcluir
  21. Ótimo tutorial!
    Se eu soubesse mexer no HTML do novo Blogger!kk
    http://zombieesvg.blogspot.com.br/

    ResponderExcluir
  22. amei o tutoriall arasou como sempre
    adotadospelopai.com.br

    ResponderExcluir
  23. Sou apaixonada por efeitos mirror em fotos auha, mesmo não tendo nada a ver com o post. Amei o resultado, fica muito legal e bem original :D
    Beijos ♡
    Sim Senhorita (Clique aqui ou no perfil)
    @SiimSenhorita

    ResponderExcluir
  24. fica realmente muito diferente e lindo!
    adorei! xoxo♥

    amoraazeda.blogspot.com

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