Tutorial: Efeito Shine nos Afiliados

                             
                                                           Boa noite potatinhos!
Tudo bom com voces? hoje trago um tutorial que eu aprendi lá no Kawaii World esse
efeito eu uso nos afiliados aqui do blog, super prático e facil mais precisa de atenção 
por que erros de Html são terriveis vamos lá todos os DEVIDOS CREDITOS vão para o 
World of Thel vamos para o tutorial?


1.Vá em Modelo > Editar HTML > Aperte Ctrl + F e procure por:  ]]></b:skin>
2. Acima desse código 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;
}

Largura e Altura: ( voce coloca a largura e altura da borda da sua imagem)
Cor da borda:  uma ótima tabela de cores clique aqui

Depois é só clicar em salvar.
3. Vá em Layout > Adicionar Gadgets > Html/JavaScript e cole esse código:

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

Link da imagem: coloque link da sua imagem
Link: coloque o link do blog afiliado
Titulo: coloque o nome do blog afiliado

4. Salve e vizualize e veja se está tudo certinho OK

Espero que tenham gostado desse 1° tutorial do blog, adoro esse tutorial!
                                       Bjokas Amores