Menu galaxy

Ohayou ^^

Sem perder grande tempo com desculpas, vamos ao que interessa: aqui está um menu muito simples, prático, belo e que se tem visto em vários layouts recentemente. Normalmente é chamado de galaxy, e tem várias opções de cores, mas eu modifiquei ligeiramente o tutorial de forma a que seja fácil a qualquer pessoa personalizá-lo, pois basta trocar a url do fundo. Se, por outro lado, quiserem a versão original, eu disponibilizo os links da imagem em baixo. Créditos ao Miki Candy por me ter relembrado que o menu existe ;)

Visualizar: www | www

O primeiro modelo, nas 4 sidebars, é do blogs miki candy, e o segundo é meu, com algumas alterações para que possam ter diferentes formas de visualizar.

Tutorial

Vá em Editar HTML do seu blog e use Ctrl+F para procurar por:

/b:skin

Em cima disso, cole o código seguinte:

menu1 {

background-image: url(URL-CLARA);

font-family: Georgia;

color:#fff;

outline-offset: -3px; outline: 1px solid #fff;

font-size: 10px;

letter-spacing: 2px;

text-transform: lowercase;

font-style: italic;

padding-top: 4px;

padding-bottom: 4px;

padding-right: 3px;

padding-left: 3px;

margin-right: 3px;

margin-bottom: 3px;

text-align:center;

text-decoration:none;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

float: left;

width: 46%;

height: 15px;

text-shadow: 0px 0px 0px #fff;

-webkit-transition-duration: .40s;

}

menu1:hover{

opacity: .70;

-webkit-transition-duration: .40s;

}

menu2{

background-image: url(URL-ESCURA);

font-family: Georgia;

color:#fff;

outline-offset: -3px; outline: 1px solid #fff;

font-size: 10px;

letter-spacing: 2px;

text-transform: lowercase;

font-style: italic;

padding-top: 4px;

padding-bottom: 4px;

padding-right: 3px;

padding-left: 3px;

margin-right: 3px;

margin-bottom: 3px;

text-align:center;

text-decoration:none;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

float: left;

width: 46%;

height: 15px;

text-shadow: 0px 0px 0px #fff;

-webkit-transition-duration: .20s;

}

menu2:hover{

opacity: .70;

-webkit-transition-duration: .20s;

}

Para o fundo ficar da cor que quer, você só tem de trocar a url dos backgrounds, onde diz, em maiúscula, ULR-CLARA e URL-ESCURA. Aqui estão os códigos conforme as cores. Se você tiver algum outro fundo em mete, também pode colocar, é com você.

~Azul~Claro: http://1.bp.blogspot.com/-lRwR36-VocY/VPGmXhG29QI/AAAAAAAAbxU/f7HWFpAHYek/s1600/0-a-claro.png

Escuro: http://4.bp.blogspot.com/-Jf5AjmjFRiE/VPGmXiKgKxI/AAAAAAAAbxY/xZuKqlEJ-ow/s1600/0-a-escuro.png

~Verde~Claro: http://2.bp.blogspot.com/-cChrbSxsGq4/VPGmZJDst-I/AAAAAAAAbxo/qANo4hMWYHo/s1600/0-v-claro.png

Escuro: http://1.bp.blogspot.com/-tWSKQgrzI58/VPGmZexehwI/AAAAAAAAbxw/KPe-P9qRKJI/s1600/0-v-escuro.png

~Amarelo/laranja~Claro: http://3.bp.blogspot.com/-XgZ5EY-KVeg/VPGmXklUsGI/AAAAAAAAbyM/weDuBHckqLU/s1600/0-l-claro.png

Escuro: http://4.bp.blogspot.com/-mM_3EUfT5yc/VPGmYFiCDtI/AAAAAAAAbxc/ty5Vu9B_Mrs/s1600/0-l-escuro.png

~Rosa~Claro: http://1.bp.blogspot.com/-Wx8zXNXBKcM/VPGmYXVLFVI/AAAAAAAAbxg/GS8CV_9oil0/s1600/0-r-claro.png

Escuro: http://4.bp.blogspot.com/-YZKg-f7kwzg/VPGmYvamI5I/AAAAAAAAbxk/EG2g4giAFl4/s1600/0-r-escuro.png

Depois disso, para fazer o menu funcionar adicione um Gadget HTML/JavaScript e cole o código seguinte:

<a href="LINK1" title=""><menu1>NOME</menu1></a>

<a href="LINK2" title=""><menu2>NOME</menu2></a>

<a href="LINK3" title=""><menu2>NOME</menu2></a>

<a href="LINK4" title=""><menu1>NOME</menu1></a>

<a href="LINK5" title=""><menu1>NOME</menu1></a>

<a href="LINK6" title=""><menu2>NOME</menu2></a>

É muito simples e fica bem com qualquer layout, certo? Créditos aos icons que usei para ilustrar a postagem ao blog Lovely Milkshake :3