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