28 de nov de 2012

Tutoriais: Imagens rolando da sidebar + Menu Wishlist

WHH

Booa Tarde.

Hoje trouxe para vocês 2 tutoriais que  eu uso aqui e peguei do We Heart HTML, então já dei os créditos!
Para verem os tutoriais já sabem onde clicar
Imagens Rolando na Sidebar
Essas imagens rolando é tipo um slide para a sidebar, é aquela que a gente tem com a Debby Ryan, que quando passamos o mouse as imagens param.

Primeiro, vó em Modelo/Design > Elementos da Página e clique em Adcionar um Gadget HTML/JavaScript, nele coloque este código:
<marquee direction="left" scrollamount="8" width="100%" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">
<img src="LINK DA IMAGEM" />
<img src="LINK DA IMAGEM" />
<img src="LINK DA IMAGEM" />
<img src="LINK DA IMAGEM" /> </marquee>
 Onde está LINK DA IMAGEM, você coloca o Link da Imagem. Já na parte em Itálico, é o tempo que leva ou a rapidez das imagens ao passar. Quanto menor o número mais lento, e quanto maior mais rápido.

Menu Wishlist
Esse é o menu que tem no nosso Status, e quando passa o mouse uma faixa aparece, de cor diferente.
Primeiro, vá em Design/Modelo > Editar HTML > Ctrl + F e procure por :
]]></b:skin>
E quando achar, cole acima:
.wishlist {
background: #eee;
font-family:  Verdana;
font-size: 8px;
margin: 1px;
color: #444444;
display: block;
-moz-box-shadow: inset 3px 0 0px 0 #C6E68D;
-webkit-box-shadow: inset 3px 0 0px 0 #C6E68D;
box-shadow: inset 3px 0 0px 0 #C6E68D;
padding: 3px 3px 3px 6px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.wishlist:hover {
-moz-box-shadow: inset 550px 0 0px 0 #C6E68D;
-webkit-box-shadow: inset 550px 0 0px 0 #C6E68D;
box-shadow: inset 550px 0 0px 0 #C6E68D;
color: #444444;}
Edite o que está em Negrito, pelas cores que você quer. Agora, adicione um gadget HTML/JavaScript com este código:
<div class="wishlist">TEXTO AQUI</div>
<div class="wishlist">TEXTO AQUI</div>
<div class="wishlist">TEXTO AQUI</div>

Qualquer coisa credite ao We Heart HTML táa? Plágio é Crime!
Comentem com sua opinião
xoxo'
Gabi
Sz 

2 comentários:

  1. Adorei os tutoriais! Inclusive, eu até uso o primeiro :3 Beijos <3

    Explodindo Glitter

    ResponderExcluir