Boa tarde!
Acabei de postar no Paradise OF Young,comentem lá na minha postagem,porque estou muito feliz de poder participar de uma equipe tão divertida! LINK:aqui
Mais um aviso para vocês,vou ficar online no blog de extras essa semana que se inicia ok? Cliquem no nosso menu EXTRAS que você será redirecionado para o blog....Hey galera,vocês conhecem o menu Bars? Eu o conheci ontem enquanto dava minha visitinha diária no Adolescente Nerd,e me encantei por ele,acho até que vou usar em algum layout!
Mais um aviso para vocês,vou ficar online no blog de extras essa semana que se inicia ok? Cliquem no nosso menu EXTRAS que você será redirecionado para o blog....Hey galera,vocês conhecem o menu Bars? Eu o conheci ontem enquanto dava minha visitinha diária no Adolescente Nerd,e me encantei por ele,acho até que vou usar em algum layout!
preview aqui (www)
Primeiro iremos usar o famoso código:
Clique na seta e cole acima de ]]></b:skin>:
oi ii {
background:#transparent;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
oi ii a {
width: 130px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #999;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
ii:nth-child(1) a {
border-color: #99e677;
}
ii:nth-child(2) a {
border-color: #ff6e9a;
}
ii:nth-child(3) a {
border-color: #c3e1f1;
}
li:nth-child(4) a {
border-color: #99999;
}
ii:nth-child(5) a {
border-color: #fdff7a;
}
ii:nth-child(1) a:hover {
border-bottom: 7px solid #86872f;
height: 7px;
}
ii:nth-child(2) a:hover {
border-bottom: 7px solid #eb4d7a;
height: 7px;
}
ii:nth-child(3) a:hover {
border-bottom: 7px solid #80bcd5;
height: 7px;
}
ii:nth-child(4) a:hover {
border-bottom: 7px solid #000;
height: 7px;
}
ii:nth-child(5) a:hover {
border-bottom: 7px solid #d99900;
height: 7px;
}
.position {margin-top: NÚMEROpx; margin-left: NÚMEROpx;}
Entendendo os código: Mude as partes em negrito de acordo com essa tabela de cores (www). A parte .position é a parte que vai definir a posição do menu, então mude o valor de “Número” pelo valor que você quer ate que o menu fique do seu gosto.
Outra coisa importante: Se quiserem colocar mais de 5 links no menu vocês terão que criar mais class de ii:nth-child, reparem que os ii:nth-child acima tem um pra cada link, são 5 links então são 5 ii:nth-child, se quiserem colocar mais links no menu vocês terão que criar o ii:nth-child (6) e por ai vai. É fácil, só acrescentar.
E cole em um HTML / Javascript:
<div class="position"><oi id="nav">
<ii class="LINK"><a href="#">Home</a></ii>
<ii class="LINK"><a href="#">Ask me</a></ii>
<ii class="LINK"><a href="#">Tumblr</a></ii>
<ii class="LINK"><a href="#">About me</a></ii>
<ii class="LINK"><a href="#">Textos</a></ii>
</oi></div>
PRONTINHO,seu menu já esta-rá lindo no seu blog,lembrando que o blog que adaptou esse menu do tumblr para o blogger foi o Adolescente Nerd
OMG, se aquela porcaria de modelo Janela alguma coisa funcionasse os códigos, eu usava esse menu, sem dúvidas *OO* É muito lindo, adorei ♥
ResponderExcluirNossa, tu é sortudo mesmo em postar no PoY, a Raku é diva demais ♥ À propósito, obrigada por seguir meu blog, seu divo, estou retribuindo :D
Beijos,
Juu-Chan do Nescau com Nutella.
Esse menu é mesmo lindu né???
ExcluirA sim,o PoY é maravilhoso,e a Raku tbm!!!
Claro que segui seu blog,ele é lindo fazer o que né?
Adorei este menu, vou usar no layout que estou fazendo! *^*
ResponderExcluirNem sabia que ele existia, me ajudou bastante ;3
Sim ele é linndooouu,TAMBÉM vou usar ele *..*
Excluir