20/07/2013

Tutorial: Efeito U-Down

||

Yoooo!!!! Como vão? Bom dei uma rápida olhada nos comentários e vi pedidos de divulgação e que estão precisando de postadores; como também uns fazendo grosseria pela minha demora a responder. Gente eu realmente quero ajudar mas estou fora no momento e é impossível fazer isso agora, então tenham paciência por favor. Assim que eu voltar vou atender todos os pedidos.

Agora mudando de assunto hoje vou mostrar um efeito bem legal.  É perfeito para afiliados mas vocês usam como desejarem rs' então vou parar de enrolar e mostrar logo o tutorial vocês devem querer me bater de tanto que digito. Ver efeito: Preview



1. Primeiramente vá ate seu HTML e procure por ]]></b:skin>, assim que o achar acima dele cole esse código:

.u-down {
-webkit-transition: -webkit-filter 1s;
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
padding: 2px;
border: 1px solid #eee;
-webkit-transition: all 1.5s ease;
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
transform: rotate(360deg)   translate(0px);
-webkit-transform: rotate(360deg)   translate(0px);
}
.u-down:hover{
padding: 2px;
border: 1px solid #eee;
 -webkit-filter: sepia(50%);
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
transform: rotate(180deg) scale(0.637) skew(1deg) translate(0px);
-webkit-transform: rotate(180deg) scale(0.637) skew(1deg) translate(0px);
}


2. Salve. Agora vá ate a pagina chamada "Layout" abra um gadget HTML/Javascript e dentro cole o código abaixo:

<a href="Link do blog"><div class="u-down"><img src="Link da imagem" title="Palavra"></div> 

Mude as partes em negrito e prontinho os créditos são para o blog KW.

14 comentários:

  1. Cara, que efeito lindo! Irei usar no meu próximo lay com certeza *-*

    HTML Empire - http://html-of-empire.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ebaaaaaaaaaaaaaaaaaaa *------*

      Excluir
  2. Aeee, a Wendy ta de volta (~ ̄▽ ̄)~
    desculpa não estar comentando, tava fora do blogger por um tempo, mas agora voltei, amei o tutorial.
    bjs
    'Heart of Deidara'

    ResponderExcluir
    Respostas
    1. Hehe sim, sim não estarei tão presente mas postarei toda semana pelo menos assim que consegui de terminar de responder os comentários ^^"
      Ahh que isso eu compreendo, mas fico feliz que tenha voltado e conta comigo para visitar como sempre e obrigada mais uma vez.
      Beijinhos.

      Excluir
  3. Grosseria por causa de demora? Bleh, mande todos eles se ferrarem, você não é obrigada a fazer o que todos querem HSUAHSUAH
    Adorei o efeito. Realmente ele é muito lindinho, eu usaria se a minha afiliação fosse por meio de imagens.
    Beijos,
    Ana, do Lovely Aversion

    ResponderExcluir
    Respostas
    1. hsaushaush Tem toda razão, ate e quero ajuda mas como vou não estou nem em casa... :c

      Eu também acho muito lindinho, mas tenho muitos afiliados então não posso usar mas ainda vou usar em outra coisa hihi

      Excluir
  4. Esse efeito é super fofo >.<, amore porque sumiu? Sinto a sua falta e nem no face você entra mais =/

    ResponderExcluir
    Respostas
    1. Oi miguxa, serio gostou? Que bom.
      Poxa desculpa ter sumido assim... tive que ir viajar as presas para SP por causa de curso. E quanto cheguei minha mãe decidiu se mudar ai estou sem internet. ç.ç

      Excluir
  5. Efeito lindo, flor. Super fofinho! ><
    Beijoos!
    sensatasonhadora.blogspot.com

    ResponderExcluir
  6. Fofinho esse efeito!

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
  7. Amei, muito bom!
    Gatinha estou atualizando o meu canal com vídeos semanais, visite e se gostar se inscreva, é muito importante pra mim, beijinhos.
    Canal: https://www.youtube.com/user/isabelyrogrigues
    Blog: http://fasesdegarota.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Entendo. Dou uma passadinha lá sim ^^

      Excluir