Tutorial Efeito Opacity!

OPÇÃO UM:

1- Copie este código:

<img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="(URL da imagem)" style="opacity: 0.5;" widht="" width="180" />

2 -Edite no word a parte com "URL da imagem" pelo URL da imagem ava

3- Vá em Design Adicionar um gadget HTML/JavaScript Cole o código(não coloque titulo)

Se a Opção um não deu certo tente esta que foi retirada do Blog das meninas Blogueiras:

EX.

Para fazer este efeito só é necessário usar o HTML do post.

Primeiro clique em nova postagem Editar HTML:

Depois cole este código:

<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="URL-DA-IMAGEM" /></a>

Onde esta de vermelho coloque o link do seu blog e onde esta de azul coloque o URL da imagem.

Se naum funcionou nem um dos 2 tente esse que foi retirado do blog Cherry Bomb:

Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.

Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>

Cole Antes de ]]></b:skin> o código abaixo:

/****** opacidade - MADLYLUV.COM ******/
.opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}

.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}

Salve as alterações.

Quando quiser deixar uma imagem com esse efeito, é só acrescentar class="opacidade" no código na imagem, vai ficar assim:

<img src="http://i55.tinypic.com/t7nxuf.jpg" class="opacidade"/>

Se naum funcionar ai ja era mais ai vai outro codigo que tambem foi retirado do blog Cherry Bomb:

Para colocar esse efeito, é só ir no HTML do seu blog, apertar Ctrl+F e procurar por ]]></b:skin>
Cole logo acima esse código:

.border {
-moz-opacity:0.70; opacity:0.70;
-webkit-transition-duration:2s;
background-color:#e7b3c2 /*Cor de fundo, aparece enquanto a imagem está carregando*/;
border:2px solid #c8debf; /* Cor e estilo da borda*/ }
.border:hover  {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
background-color:#e7b3c2; /*Cor de fundo quando passa o mouse em cima*/
border: 2px solid #f2ada5; /* Cor e estilo da borda quando passa o mouse em cima*/
}

Salve as alterações.
Para o código funcionar, você tem que por a tag class="border" no código da imagem, assim:
<img src="linkdaimagem" class="border"/>

OBS: Sempre edite os códigos do blog no word!