Tutorial - Efeito : Imagem desfocada

Oi minhas gatinhas! Trago um tutorial bem legal para vocês. É com aquele efeito da imagem desfocada, já viram? Bom, antes disso, me desculpem por ficar três dias sem postar, é que tive que fazer um trabalho da escola e estudar para a apresentação. Na verdade, vim terminar hoje, pois não deu para se reunir na casa de ninguém e eu fiquei responsável pelo slide, mas não se preocupem, já acabei rsrsrs, além disso, por causa de algumas briguinhas entre as minhas amigas e algumas até eu estou metida no meio :/ bom, mas acho que todos entendem que amizade verdadeira é uma coisa difícil de se encontrar, não é?

Pessoal, esse efeito é para se usar no seu blog. Em algum gadget, por exemplo. Pode ser para colocar na elite de afiliados, que quando as pessoas passarem o mouse em cima ficará com a imagem desfocada. É muito lindo o efeito e super legal, pois da um ar mais legalzinho com o blog. 

É bem fácil e tenho certeza que vocês irão compreender facilmente.. Go?

1. Para deixar a imagem desfocada e ao passar o mouse e no hover voltar ao normal, vá no HTML do seu blog, procure por ]]></b:skin> e cole todo código abaixo acima desse códigozinho que pedi para vocês procurarem. E, para deixar a imagem normal e ao hover ela ficar desfocada é só trocar onde está o 1 por 0 e virce-versa.

.desfoque {

-webkit-filter: blur(0px);

 -moz-filter: blur(0px);

filter: blur(0px);

 -webkit-transition-duration: .9s;

}

.desfoque:hover {

-webkit-filter: blur(1px);

 -moz-filter: blur(1px);

filter: blur(1px);

 -webkit-transition-duration: .9s;

}

2. Depois de ter feito esse passo, é só salvar e usar o código abaixo aonde desejar que a imagem fique com o efeito desfocado. Pode ser em um post, em um gadget, etc)

<img src="imagem que deseja" class="desfoque">

Bom minhas gatinhas, por hoje é só. Espero que vocês tenham entendido e gostado. Qualquer dúvida, é só dizer aí nos comentários que eu estou aqui para ajudar vocês (: Beijos s2