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:
É 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!
<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:
Sério que é tão fácil assim? Nossa, talvez eu use no meu próximo layout :D
Eba! Estou feliz que você postou o tutorial que te pedi. Beijos!
www.thingsofadreamer.blogspot.com
OBG flor, adorei
Adoreei , ótimooos tudo pra ajudar a gente :D
Beijoooos s2
http://detudoumpouco04.blogspot.com/
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
Adorei o tutorial! Estava precisando :)
Beijoos
legal o tutorial, vou tentar fazer esse menu quando trocar meu layout
@littlepistols
http://portifoliodasletras.blogspot.com/
é um menu muito lindo.. amei!
thelove-ofteen.blogspot.com
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
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/
Conheci este tuto no Drikoti, fica lindo *0*
Bjs,
Giih!
http://blogdasmeninasblogueiras.blogspot.com
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
Hellen, tem post novo ok *-*
E dps ensine como colocar essas ''cortininhas'' ai em cima *-*
@littlepistols
http://portifoliodasletras.blogspot.com/
Quando mudar o layout do blog eu coloco no meu. Adorei o tuto.
placeforgirlsblog.blogspot.com
adoreii, ja tinha visto no bomba de glitter e adorei! to seguindo! retribui?
http://sonhos-na-adolescencia.blogspot.com/
muito lindo né, obrigada por seguir call me maybe tbm é a minha preferida *-*
http://sonhos-na-adolescencia.blogspot.com/
Oi, fofa! Adorei o tutu, muito bem explicado isso é o que importa.
Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com
Oi, tentei e ficou menu normal ;S Beijos, www.thingsofadreamer.blogspot.com
Postar um comentário