• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

10 de março de 2013

Efeito Back + Desculpas

Hello, tudo bom?  Lembram de mim?  Espero que sim >< 
Quero pedir desculpas a Hanna, Megan e todos vocês leitores, eu estou com muitos trabalhos para fazer e faço curso o que toma bastante tempo, mais não vou ficar falando de coisas ruins !
Hoje trago um tutorial bem fácil e que fica muito lindo.

Visualize aqui.
Primeiro faça sua imagem como esta por exemplo:
O tamanho dela é 266x100 mais você vai escolher o tamanho que preferir.

Vá em Modelo > Editar HTML e procure por ]]></b:skin> cole acima da tag achada o seguinte código:

/*** efeito back por htmlstrew ***/
@-WEBKIT-KEYFRAMES PULSE {0% { -WEBKIT-TRANSFORM: SCALE(1); }50% { -WEBKIT-TRANSFORM: SCALE(1.1); }100% { -WEBKIT-TRANSFORM: SCALE(1); }}
.moddib {background: url('http://static.tumblr.com/e2dfyqw/8mhmi4b0y/2.png'); height: ALTURApx; width: LARGURApx; display: inline-block; -webkit-transition-duration: 0.5s; margin-left:10px;}
.moddib:hover {background-position: right; -WEBKIT-ANIMATION: PULSE 1S;-MOZ-ANIMATION: PULSE 1S;-MS-ANIMATION: PULSE 1S; -webkit-transition-duration: 0.5s; }

Entendendo o código: Aonde esta de vermelho coloque o link da sua imagem e onde esta de rosa coloque a altura e a largura da imagem.

Na hora de usar vá em Layout > Adicionar um novo gadget > HTML/JavaScript e cole:
<div class="moddib"></div>
OBS: Na hora de colocar a largura da imagem divida o total da largura por 2!
Exemplo 266 dividido por 2 = é igual a 133,então coloque 133 na largura!

E aí gostaram? espero que sim! Beijos :*
Créditos á  We  Heart HTML

6 comentários:

  1. Lary sua diva, estava procurando muuuuuito este tutorial !
    obrigada.
    Ah, e eu sei como é, é trabalho para cá, para lá, e toma todo nosso tempo.

    Beijos, e novamente obrigada u3u
    the-moon-reverse.blogspot.com

    ResponderExcluir
  2. Onw, amei o tutorial Lary, que bom que mesmo você não tendo tempo apareceu aqui >u<'

    Olha, não sei se percebeu mais já coloquei seu banner de assinatura na postagem ok? :3 espero que goste, aqui está o link da imagem: 2.bp.blogspot.com/-vQ4T8wZLt0I/UTzqmmBNzCI/AAAAAAAADy4/AiJnK4-vGJQ/s1600/Lary.png

    Amei o tutorial, eu já tinha visto no WHH, achei muito legal você trazer o tuto pra cá, pois é mesmo diferente o efeito!

    ResponderExcluir
  3. Adoro esse efeito!! muito bom <3
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  4. Esse efeito é muito lindo vou usar no meu próximo lay com os créditos é claro!
    Nossa que unhas perfeitas *----------------*
    preciso ir aí hahaha >.< Primeira vez no seu blog e mim encantei super fofo :3

    Ótimo Post!
    Participe do Sorteio de 1 Ano de MFF.

    By: Camis

    http://mundofantasticofeminino.blogspot.com.br

    Seguindo Segue de Volta?

    ResponderExcluir
  5. Sempre quis saber como faz esse efeito, agora aprendi! Adorei o tutorial, está bem explicado ^u^ Flor o novo layout está muito divo, omg!

    crazyforhtml.blogspot.com

    ResponderExcluir