Transição do Gadget "Autoras"

 

Yoo!

Finalmente tive tempo de fazer o tutorial daquela transição que temos ali do lado.

Primeiro: Se você for usar, não faça exatamente igual a mim. Não use as mesmas imagens, mesmas cores e mesmos conceitos de uma vez só. Claro, eu preciso que você credite.

O tutorial é um pouquinho complicado e exige um mínimo de atenção.

A transição não funciona se você estiver usando aqueles famosos links com hover personalizado. 

1. A primeira coisa que você tem que saber é que existe um código para cada imagem. Por exemplo: No gadget de autoras você vê 4 imagens de animes. Para cada uma delas você tem que repetir o tutorial, mudando apenas as configurações.

2. Procure por ]]></b:skin> e acima da tag cole:

.autora1{

    width: 245px;

    height: 80px;   

    overflow: hidden;

    background: #f8cbe8 url(LINK DA SUA IMAGEM);

    box-shadow:

        inset 0 0 1px 100px rgba(0,0,0,0.5),

        inset 0 0 0 6px #ff6cc9;

   -webkit-transition-duration: .80s;

    display: block;

    outline: none;

margin-bottom: 3px;

margin-left: 3px;

margin-right: 3px;

}

.autora1:hover{

    box-shadow:

        inset 0 0 0 0 rgba(0,0,0,0.1),

        inset 0 0 0 15px #abf211,

        0 0 6px rgba(0,0,0,0.3);}

Vamos entender:

.autora1 e .autora1:hover - Vamos supor que você vá usar esse tutorial também no gadget de autoras, como eu.  Quando você for colocar a segunda autora  será encessário mudar o nome.

Autora1 - Corresponde a postadora Jucicreide.

Autora2 - Corresponde a postadora Juraci.

Entenderam?

LINK DA SUA IMAGEM - Coloque a imagem que quiser. Em Width e Height você insere o tamanho. Nesse caso temos 245 x 80.

3. Como eu faço para a imagem aparecer?

Vá em Editar HTML e coloque um gadget de HTML/JavaScript, nele cole:

<td><a href="LINK" title="NOME QUE APARECE AO PASSAR O MOUSE" class="autora1"></a></td>

Lembrem-se: Esse autora1 será mudado caso você queira que apareça a segunda autora.