[Tutorial] Menu Sprite

Hey! Eu demorei bastante mas finalmente trouxe esse menu que um pessoal pediu: o Menu Sprite. Eu já tinha visto em alguns blogs e achava madnífico o efeito que tem esse menu. Procurei em blogs mas não encontrei nada que me agradou, até que achei no tumblr e então adaptei pro blogger. Tá, isso não foi difícil. Todos os créditos ao tumblr Queen Extras. (E obrigada a Cherr pela nova palavra no meu vocabulário xD)

O tutorial não é complicado só que tem que prestar atenção nos detalhes. Antes de passar os códigos, você tem que primeiro fazer uma imagem como essa:

O "home" com o fundo roxo é o estado normal e o roxo mais claro (lilás?) é o que vai aparecer quando você passar o mouse em cima do botão -avá. Você pode usar esse como base e recolorir. Pra ficar certinho na hora em que passar o mouse em cima, a imagem tem que estar dividida ao meio igualmente. Preste bastante atenção nessa parte, pois se sobrar ou faltar um pixel já vai fazer muita diferença.

Acima de ]]></b:skin> você irá colar o seguinte código:

#nav a.home{padding-left: 15px; float:left; display:block; background: url(LINK_DA_IMAGEM_HOME) no-repeat; width: 79px; height: 25px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

#nav a.home:hover {background-position: -0px -25px;}


#nav a.parceiros{padding-left: 15px; float:left; display:block; background: url(LINK_DA_IMAGEM_PARCEIROS) 0px 0px no-repeat; width: 75px; height: 25px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

#nav a.parceiros:hover {background-position: 0px -25px;}


#nav a.mapa{padding-left: 15px; float:left; display:block; background: url(LINK_DA_IMAGEM_MAPA) 0px 0px no-repeat; width: 84px; height: 25px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

#nav a.mapa:hover {background-position: 0px -25px;}


#nav a.contato{padding-left: 15px; float:left; display:block; background: url(LINK_DA_IMAGEM_CONTATO) 0px 0px no-repeat; width: 40px; height: 25px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

#nav a.contato:hover {background-position: 0px -25px;}


#nav a.sobre{padding-left: 15px; float:left; display:block; background: url(LINK_DA_IMAGEM_SOBRE) 0px 0px no-repeat; width: 40px; height: 25px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

#nav a.sobre:hover {background-position: 0px -25px;}

width: é a largura da imagem que você vai usar pro botão.

height: é altura da metade da imagem que você vai usar. faça uma imagem em que a altura não seja um número ímpar xD 

LINK DA IMAGEM: você cola o link da imagem do botão.

padding-left: é o espaço entre cada botão.

home, parceiros, mapa, contato, sobre: são os nomes que dei pra cada botão, você pode alterar se preferir, mas deve mudar também na class do código seguinte.

 <div style="position: absolute; left:130px; top: 260px; margin-top: 10px; margin-bottom: 55px;" >
<div id="nav">
<center>
<a href="/" class="home"></a>
<a href="LINK_PARCEIROS" class="parceiros"></a>
<a href="LINK_MAPA" class="mapa"></a>
<a href="LINK_CONTATO" class="contato"></a>
<a href="LINK_SOBRE" class="sobre"></a>
</center></div>

Esse código você cola em um novo gadget HTML/javascript.

LINK: o link das páginas do seu blog.

left: é o número do quanto você quer que o menu vá para a esquerda.

top: aqui fica o número do quanto você quer que o menu desça. se quiser que ele suba coloque o - antes do número.

Então é isso, gostaram? Quem tentar me mostra como ficou? Se alguma coisa der errado ou se você não entendeu me avise. (:

Lembrando que a votação da Batalha das Músicas termina hoje às 23:59.