Efeito 4 Slidings

Olá, boa tarde ^^ Trago mais um tutorial para vocês ele se chama Efeito 4 Slidings, achei ele no blog Bunny Crazy, o efeito e simplesmente divino, querem ver? Então clique aqui, shown não é? então vem comigo pra aprender !!

Vá ate seu HTML e procure pelo ]]></b:skin>, achou? Então cole esse código acima dele:

.qitem { width:140px; height:140px;
border:4px solid #222;
margin:5px 5px 5px 0; background: url('http://www.queness.com/resources/html/bar/bg.gif') no-repeat; overflow:hidden; position:relative; float:left; cursor:hand; cursor:pointer; font-family: arial;} .qitem img { border:0; /* allow javascript moves the img position*/ position:absolute; z-index:200; } .qitem .caption { position:absolute; z-index:0;
color:#ccc; display:block; } .qitem .caption h4 { font-size:18px; padding: 10px; margin: 0px; color: #D40C0C; text-align: center } .qitem .caption p { font-size:11px;
padding: 10px; margin:0; text-align: ce;nter } .bar1, .bar2, .bar3, .bar4 { position:absolute; background-repeat: no-repeat;
z-index:200;} .clear { clear:both;
}

 Otimo, eu aconselho não mecher em nada a não ser na imagem "gif", cor e largura como altura estão todos destacados em negrito. Agora salve é va ate layout e adicione um gadget HTML/JavaScript e cole esse código nele.

Outra vez aconselho a não mecher em nada a não ser a url da imagem e a descrição/link, bom é isso espero que tenham gostado ! Não esqueçam e comentar kisses ~

4 comentários: