27 de fev. de 2012

Menu lavalamp

Olá fofurinhas *-* A pedido de uma leitora muito especial irei ensinar como fazer o menu lavalamp (esse que eu uso) Prestem atenção pois o tutorial é de nível médio ok?

 Vá no seu html , e procure por: <head> 
Abra esse arquivo e cole o código acima dela.
Agora procure por Body { e cole o seguinte código acima dela: 
.lavaLamp { position: relative; height: 29px; width: 300px; background:#00CED1; padding: 15px; margin: 10px 0;overflow: hidden; border-radius:15px; }
.lavaLamp li { float: left; list-style: none; }
.lavaLamp li.back { background:#FFF; filter:alpha(opacity=80);-moz-opacity:80.80;opacity:0.80; width: 9px; height: 30px;z-index: 8; position: absolute; border-radius: 15px; }
.lavaLamp li.back .left { background:#EEE; filter:alpha(opacity=80);-moz-opacity:80.80;opacity:0.80; height: 30px; margin-right: 9px; }
.lavaLamp li a { text-transform:uppercase; position: relative; overflow: hidden;text-decoration: none;text-transform: uppercase;outline: none;text-align: center;height: 30px; top: 7px;z-index: 10; letter-spacing: 0;float: left; display: block;margin: auto 10px; font-family:verdana; font-size:11px; color:#00CED1; text-align: center;overflow: hidden; }
.lavaLamp li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { color: #00CED1; border: none; }
Entendendo o código: 
Height: Altura (recomendo que não mude)
Width: Largura (recomendo que não mude)
Font-family: Fonte
Font-size: Tamanho da fonte

O que eu marquei de:
Vermelho: Cor do fundo do menu
Azul: Cor do menu quando passa o mouse
Roxo: Cor da fonte do menu

Você provavelmente está achando que irá colocar nos gadjets ao lado dos posts não é mesmo? Negativo! Você irá adicionar um gadjet acima dos posts para funcionar. Vá no seu html e procure por: 
 logo abaixo você provavelmente irá encontrar: showaddelement='no' agora é só trocar o no por yes. Salve e verá que agora tem um gadjet acima dos posts. Adicione o seguinte código:
<ul class="lavalamp"> <li> <a href="SEU LINK"> NOME DO SEU LINK </a> </li>

É isso gente, o tutorial é mais fácil do que parece rs' Ahh e deu trabalho para fazer esse tutorial então se usar credite por favor. É isso. Gostaram do tutorial? Conseguiram fazer o menu? Comentem!  

18 comentários:

Plum disse...

Sério que é tão fácil assim? Nossa, talvez eu use no meu próximo layout :D

Thábata Bauer disse...

Eba! Estou feliz que você postou o tutorial que te pedi. Beijos!

www.thingsofadreamer.blogspot.com

Anônimo disse...

OBG flor, adorei

Unknown disse...

Adoreei , ótimooos tudo pra ajudar a gente :D
Beijoooos s2

http://detudoumpouco04.blogspot.com/

dribs disse...

Fica muito massa! Um dia aí, eu fui tentar fazer com aqueles caras que fazem um código enorme, saiu um cocô!
pinkpimenta.tk
Poucos códigos ajudam mais! ;D

Nanda Prado' disse...

Adorei o tutorial! Estava precisando :)

Beijoos

Juliana Martinelli disse...

legal o tutorial, vou tentar fazer esse menu quando trocar meu layout

@littlepistols
http://portifoliodasletras.blogspot.com/

kimberlyy disse...

é um menu muito lindo.. amei!

thelove-ofteen.blogspot.com

gabbi m. disse...

Oi, é lindo esse menu! Quem sabe eu peça no proximo lay(se nn for pedir demais né hellen?!)
Adorei
Beijos

http://republica-girls.blogspot.com

HIDEOUT disse...

Naao acrediiito procura isso a muuuuuuuuuuito tempo OMG :0 OBG ta por ajudar s2 Ameei tudo seu post's são lindos e seu blog Maravilhosos *--*
da uma passadinha la bno Portal Disturbia Ficaria Feliz ?
http://pdisturbia.blogspot.com/

Unknown disse...

Conheci este tuto no Drikoti, fica lindo *0*

Bjs,
Giih!

http://blogdasmeninasblogueiras.blogspot.com

Vida de Garota disse...

Oi, fofa. Que demais, amei aprender esse tutu, no próximo lay eu uso.
Amei seu blog, seguindo aqui.
me ajuda alcançar minha meta, é só seguir de volta. Vou amar te ver por lá!

Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com

Juliana Martinelli disse...

Hellen, tem post novo ok *-*
E dps ensine como colocar essas ''cortininhas'' ai em cima *-*
@littlepistols
http://portifoliodasletras.blogspot.com/

Paulina disse...

Quando mudar o layout do blog eu coloco no meu. Adorei o tuto.

placeforgirlsblog.blogspot.com

Anônimo disse...

adoreii, ja tinha visto no bomba de glitter e adorei! to seguindo! retribui?
http://sonhos-na-adolescencia.blogspot.com/

Anônimo disse...

muito lindo né, obrigada por seguir call me maybe tbm é a minha preferida *-*
http://sonhos-na-adolescencia.blogspot.com/

Vida de Garota disse...

Oi, fofa! Adorei o tutu, muito bem explicado isso é o que importa.


Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com

Thábata Bauer disse...

Oi, tentei e ficou menu normal ;S Beijos, www.thingsofadreamer.blogspot.com