Tutorial - Efeito Nebulla

Yoo~

Trago um tutorial de como por um efeito lindo, que se pode usar em afiliados,autores e até divulgações

Vamos lá?

 Live Preview aqui(www)

Vá em Modelo>>Editar HTML e procure por ]]></b:skin> e acima da tag cole:

 figure {    margin: 3px;width: 225px; /* Largura da Imagem */    height: 50px; /* Altura da Imagem */   overflow: hidden;    position: relative; border: 3px solid #AFEEEE; /* Borda da Imagem */    margin-right: 3px;    float: left;}

figcaption {    font-family: verdana;  /* Fonte */  font-size: 11px;    /* Tamanho da Fonte */position: absolute;    display: block;

width: 130px;    height: 20px;

  left: 310px; bottom: 10px; text-align: center; color: #fff;  /* Cor do Texto */  text-shadow: none; background: url(http://i.imm.io/wDjd.png); border: 3px solid #ADD8E6; /* Borda da faixinha */ line-height: 20px;    box-shadow: rgba(0,0,0,.5) 0 2px 8px; -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

transition-duration: 60s; -webkit-transition-duration: .60s;}figure:hover figcaption { left: 125px;bottom: 10px;} /* Onde a Faixinha fica */

Agora abra um gadget HTML/JavaScript e cole:

<a href="LINK"><figure><img src="IMAGEM" width="225" alt=""/>

<figcaption>NOME</figcaption></figure></a>

Se não der certo,me diga por comentário!!