Efeito Shine!

Ooooi! Tudo bem com vocês? E então vocês viram a apresentação da nova postadora? *-* Bom, desculpem-me por não ter postado esses dias, minhas aulas começaram e sabem como é né? Minutos de empolgação e minutos de tédio, já que minha melhor amiga passou para de manhã ;-; Além de ter muita matéria nova no ensino médio. Mas enfim, hoje eu trouxe um efeito bem legal pra vocês, se chama Efeiro Shine, peguei no Kawaii World, vamos ver?

Vocês tem uma previw dele aqui, é só se dirigir ao gadget que está escrito "Efeito Shine" (claro '-')

Então vamos lá:

1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole:

.image_shine{
    width:  LARGURApx;
    height: ALTURApx;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    float: left;
    border: 3px solid #CORDABORDA;
}
.hover_shine{
    width:115px; height: 115px;
    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);
    position: absolute;
    background-position: -265px 0;
    left:0px; top:0px;
    background-repeat:no-repeat;
}
.hover_shine:hover{
    background-position: 10px 0;
    -webkit-transition: background-position .9s ease;
       -moz-transition: background-position .9s ease;
         -o-transition: background-position .9s ease;
            transition: background-position .9s ease;
}

Então, vocês vão editar apenas o que está em negrito, em LARGURA e ALTURA você põe os dados da imagem de vocês, o mesmo ontem está 115, Width para largura e Height para altura. Salve.

2. Vá em Layout e adicione um novo gadget HTML/JavaScript e cole nele o seguinte código:

<div class="image_shine"><img src="LINK DA IMAGEM"/><a href="LINK" title="TITULO"><div class="hover_shine"></div></a></div>

Edite as partes em negrito e salve, pronto agora você tem o Efeito Shine ^-^