28.2.15

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

Sem comentários:

Enviar um comentário