21/12/2012

Efeito Nebulla


Trago mais um efeito que eu achei no KW efeito Nebulla. Eu achei ele bem legal que não resisti em não postar aqui. Caso queira ver o efeito, basta clicar no link mais abaixo. E me segui para ver como é o tutorial!

1. Vá no HTML do seu blog, e pesquise por:

Códigos
]]></b:skin>

2. Assim que achar cole o seguinte código acima da tag:

Códigos
figure { margin: 3px; width: LARGURApx; height: ALTURApx; overflow: hidden; position: relative; border: 3px solid #CORDABORDA; margin-right: 3px; float: left;}
figcaption { font-family: verdana; font-size: 11px; position: absolute; display: block; width: 111px; height: 20px; left: 267px; bottom: 6px; text-align: center; color: #CORDAFONTE; text-shadow: none; background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png); border: 3px solid #CORDABORDADAFAIXA; 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: 35px;bottom: 10px;}

3. Arrume o código como se pede, então salve e vá ao Layout e faça um Gadget de HTML e JavaScript , colando :

Códigos
<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/><figcaption>NOME</figcaption></figure></a>
<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/><figcaption>NOME</figcaption></figure></a>
<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/><figcaption>NOME</figcaption></figure></a>

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345