Tutorial - Efeito Fact // Exclusivo

Moshi Moshi!

E hoje, estou fazendo a primeira postagem de tutorial do blogue. ~emoção~ Como é a primeira, gostaria que avisassem-me caso esteja mal explicado. Sou terrivelmente péssima em explicar coisas diversas ás pessoas e estou sempre precisando de auxilio.

 O efeito que trago hoje é o que se encontra no primeiro e segunda gadget da sidebar. A imagem está ao lado do texto e sua transição consiste em rodar, 'aumentar' e um efeito de transição quando está em hover. Ela também contém uma borda e arredondamento, deixando o efeito fofo.

Para aplicar vá no HTML do seu blogue (Modelo - Editar HTML) e expanda a primeira seta que há nele. Dê Ctrl + F, ou F3, e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte código:

.fact{
border: 1px solid #ccc;
-webkit-transition:all 1s ease;
border-radius: 3px;
padding: 2px;
width: 90px;
height: 90px;
}
.fact:hover{
-webkit-filter:grayscale(1);
-webkit-transition:all 1s ease;
-webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);
opacity:0.30;
-moz-opacity: 0.30;
filter: alpha(opacity=30)
}

 As partes destacadas em negrito consistem na cor da borda e o "nível" de arrendondamento da imagem, respectivamente. Mude-os caso queira, até ficar do jeito mais harmonioso possível para você. 

Agora, vá no gadget que deseja aplicar a foto (Layout - Gadget Desejado) e cole nele o seguinte código:

<a href="link" title="nome_do_link"><img src="url_da_imagem" align="right" class="fact"/></a>

Os comandos para cada "lugar" estão no próprio código, basta segui-los. Em caso de dúvida, por favor, avisem-me. Posso tentar explicar melhor e mudar a postagem.

Caso queiram algo é só pedir por comentários. Atenderei o mais rápido possível.