Tutorial - Efeito Who // Exclusivo!


Tudo bem, pequenos bonecos de cereal? Estou péssima, mas obrigada por perguntar. Fiquei justamente gripada na semana do recesso de julho, que começa dia 12 para mim. Minha garganta doí até a morte e estou tossindo sem parar ultimamente. E para piorar, não tenho conseguido dormir muito bem.

Mas tirando esse papo chato, e que quase ninguém gosta, aqui estou eu para postar o lindo efeito que está residindo na primeira imagem da sidebar. Ele é bem fofo, não? Confesso que deu certo trabalho fazê-lo, pois ele estava juntando com o texto e ficou daquele modo um tempo... Vamos lá?


Para ver o efeito, clique aqui. O efeito nem é aquilo tão extraordinário assim, mas é bem bonito. E, se você quiser usá-lo, vá em Modelo > Editar HTML > Expanda a primeira setinha. Dê Ctrl F ou F3 e procure por: ]]></b:skin>. Acima dessa tag, cole:

.who{
padding: 1px;
opacity: 0.75;
border: 1px solid #cor_da_borda;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
.who:hover{
border: 1px solid #cor_da_borda_hover;
background: #fff;
transform: rotate(360deg) scale(0.8) skew(0deg) translate(0px, -31px);
-webkit-transform: rotate(360deg) scale(0.8) skew(0deg) translate(0px, -31px);
-moz-transform: rotate(360deg) scale(0.8) skew(0deg) translate(0px, -31px);
-o-transform: rotate(360deg) scale(0.8) skew(0deg) translate(0px, -31px);
-ms-transform: rotate(360deg) scale(0.8) skew(0deg) translate(0px, -31px);
}

Modifique as partes destacadas em negrito, o código está explicado no próprio código. Agora, vá em Layout > Adicionar Gadget > HTML/Javascript. Neste novo gadget cole o seguinte código:

<img class="who" src="URL_DA_IMAGEM" />

Modifique a parte em itálico, que está explicada no próprio código e salve. Caso ocorra alguma dúvida, favor contatar a minha pessoas.

Espero que tenham gostado,
~Pequena~

20 comentários:

  1. Testei c: Que lindo que fica, sua diva ♥

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  2. Que efeito fofo :3 Adoreii u3u
    Kiss ~

    letterofpain.blogspot.com

    ResponderExcluir
  3. No meu blog as ilustrações, é um efeito meio parecido -q eu usei o tutorial do The Moon Reverse e modifiquei -q mas enfim, o seu efeito ficou bem fofinho *-*
    Adorei...

    Beijos, spring-in-pariis.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu também usei o efeito do The Moon Reverse e editei. É só olhar na página de créditos, estou usando desde o template passado :)

      Que bom que gostou.

      Excluir
    2. Amora tu sabe, fazer modelos para leia mais? *-*

      Excluir
    3. Postei esse aqui, flor. Espero que goste:

      http://blog-sixseconds.blogspot.com.br/2013/06/personalizando-o-leia-mais.html

      Excluir
  4. Que lindinho, já vi um efeito pareceido, mesmo assim..
    Melhoras para ti!

    Beijos> semprefuiestranha.blogspot.com

    ResponderExcluir
  5. Melhoras :C Adorei o efeito ^^

    HTML Detected

    ResponderExcluir
  6. Efeito lindo <3
    ~Kissus, Tea Shop

    ResponderExcluir
  7. lindo efeito
    bjoks
    merriemafia.blogspot.com.br

    ResponderExcluir
  8. Que bonitinho esse efeito *O* É legal esse movimento giratório, eu curto *O*
    Beijo :*
    http://blog-part-of-me.blogspot.com/

    ResponderExcluir
  9. Adorei o efeito, é bem fofinho ^-^

    Beijos ;* | Eu Amo HTML | {euamohtml.blogspot.com}

    ResponderExcluir