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: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPYzDeIGcxChnonjzkbAsi6dhtoUqi2_H4RZybk7GoCRx2AxOkWqRmZYBHIzmkH3KQ_Lr5C6w8OnuS6fNTEgyx9OAfYvO9AHgHJk5NO_lD9ImXdgqEJWhN-sD9a2Ll3IKLqepcaXqvt19/s1600/0-a-claro.png

Escuro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptT0R-QZo1ZCUBnoFF-cWUmTEZl4FmBz0HwQIiGUWMthjbtx894HoGSRtmAZjyMxlxNF7thtUGBtxPofZjXh3Go4SCO9g1W1212LQxIgy7b3BD8apcdcECugQ7kzY_zyBG5Lxx4G_Klhp/s1600/0-a-escuro.png

~Verde~Claro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tz48pUlF0VwbMh8_ewCdfCXwCuq9WDXyqyC_kAmpexwtKMEEq5EZPomn_Ndujynaw_O6jX9UFg2xa7QjNJnl9ieDr_Wacv2QpXowtifeQwUtfhyQQWBWoSd87wIADvyWnsUSy07bHfYV/s1600/0-v-claro.png

Escuro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpHAifaUDoTZUkU4HJNIqKaLVaFEM1aNVGJjf95yRnK7uN1hrELAmSg1u2TxvBfzptrL0hGgmAKrC-MV5WXCyCuyZbMyh649IgWVwydqkUfBQSOlpaGOAZ98pQIBq2mZV28zgsJ5CMZ_MQ/s1600/0-v-escuro.png

~Amarelo/laranja~Claro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROlYryOUJSMV7LAW-HMJ6ln_7jSZva5JBL7b6lq00EvaizFo7hbb5Xl6xI-DgEa4fEwzxaz9w0IzY-Hw69R_3JXPJS7k0amVU0X9hXhZ_CkyheZbahUz8CKnl0VDP3epy69oB8mGPMy-L/s1600/0-l-claro.png

Escuro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTyGy6AqBe9f9l-s4FKdrxPVr7wOFbaO8DsMF0BZsvJ3lnpRolZrN8fJJhvyhS-myHqxVTxy8jnhuEoRfAZszVFgUCw17HPHf5SsUO3qRFXkxdqbV_7zo4BnujtPoaMWUUGwswrBJJ0-l/s1600/0-l-escuro.png

~Rosa~Claro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc54jmNA6dYglHW6C-ShmQUXqRcVdmmd7t7-AJaoSXrRllptoLA5fPKJsLUyQTDIe8lbLBR4s6MDmTh970Pqqk108x1bPSKif0OfXtwgadtliejDUKjXJC72YWMTI2NpjkKpbuAuTOPIGy/s1600/0-r-claro.png

Escuro: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKuuFPX35bcHIAWBD5ULOdVzPaiV66t9gCRzvaRO7B3oDx9_eYnm_IMPN1qjWxNMolDQH1usiKEiVl65Rk-dxihqGRBrLSS7cQ6Uq-ho4p4OmbmXzBoBqCAoRA2Nm5KqCp3L4WPOg5vnD/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