Tutorial: Efeito desfoque nas fotos

Oi pessoas *u* bom, hoje eu trouxe um tutorial bem fácil, e ele ensina a colocar efeito desfoque nas fotos! Assim, como eu uso aqui no blog. Não sabe como é? Dá uma olhada! Quem pediu esse tutorial foi a Bru, do Spring In Paris!

Acima você pode ver como fica a foto com efeito desfoque, e sem o efeito desfoque! Com o efeito desfoque, quando passamos o mouse por cima da imagem, ela desfoca. E quando tiramos o mouse, ela volta ao normal. Gostou? Quer aprender? então vamos nessa!

Vá no seu blog, em Modelo, então clique em Editar HTML, e então dê Ctrl + f e procure por:

]]></b:skin>

Então cole acima do código encontrado, esse código:

.dressbreaker {
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
transition: all .1s linear}
.dressbreaker:hover { 

-webkit-filter: blur(1px);z-index: -99px;}

Então, vá em Layout, e clique em adicionar gadget > HTML/Javascript e adicione lá o seguinte código:

<a href="LINK"><img class="dressbreaker" src="URL DA IMAGEM" /></a>

Use o código acima caso queira que sua imagem leve para algum link, (tipo de afiliados)
Caso  não queira com link, use o código abaixo:

<img class="dressbreaker" src="URL DA IMAGEM" />

Ai é só trocar ''URL DA IMAGEM'' pela URL da sua imagem, obviamente. Também dá para utilizar isto nas imagens do post, assim como aqui do blog! Só colocar o código na parte de HTML, (do lado de Escrever, bem na esquerda da barra do menu onde você edita seu post)

Prontinho! espero que tenham gostado, e usem. Obrigada, ;) beijoos