9.9.15

Sprite Menu





Olá  tudo bem ?.. Então hoje eu trouxe um tutorial bem legal  que nada mais é um menu Sprite. Bem eu queria trazer para você algo inovador e que eu sei que gostaria de achar em um blog, pois eu pesquisei muito sobre ele e não achei em nenhum lugar e quando achei não funcionou, bem esse eu achei no Tumblr  Queen Extras .


para cada aba de seu menu você vai fazer uma imagem em png uma de cada cor como a foto a seguir 


essas imagens tem que ser do mesmo tamanho.. claro que você pode mudar a cor delas e o nome essa é só uma ilustração para usar como molde, e cada parte tem que ter uma cor mais forte e outra mais clara, para que quando você passar o mouse em cima ficar como na preview , cuidem para não deixar uma parte maior e outra menor pois isso faz toda a diferença 


♥ 1- você ai em modelo e editar modelo HTML , clique no código HTML  e aperte crtl+F e vai abri uma caixa de pesquisa e nessa caixa você digita " ]></b:skin> " e acima dele você cola o seguinte código:

. #nav uma casa {padding-left: 15px; float: left; display: block; background: url (LINK_DA_IMAGEM_HOME) no-repeat;  width: 79px;  height: 25px; -webkit-transição: Fundo 0.2s linear; -webkit-transição: tudo 0.2s facilidade-out; -moz-transição: tudo 0.2s facilidade-out; transição: tudo 0.2s facilidade-out;}

#nav a. casa: 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-transição: Fundo 0.2s linear; -webkit-transição: tudo 0.2s facilidade-out; -moz-transição: tudo 0.2s facilidade-out; transição: tudo 0.2s facilidade-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-transição: Fundo 0.2s linear; -webkit-transição: tudo 0.2s facilidade-out; -moz-transição: tudo 0.2s facilidade-out; transição: tudo 0.2s facilidade-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-transição: Fundo 0.2s linear; -webkit-transição: tudo 0.2s facilidade-out; -moz-transição: tudo 0.2s facilidade-out; transição: tudo 0.2s facilidade-out; }

#nav A. Contato: hover {background-position: 0px -25px;}



. #nav uma Sobre {padding-left: 15px; float: left; display: block; background: url (LINK_DA_IMAGEM_SOBRE) 0px 0px no-repeat;  width: 40px;  height: 25px; -webkit-transição: Fundo 0.2s linear; -webkit-transição: tudo 0.2s facilidade-out; -moz-transição: tudo 0.2s facilidade-out; transição: tudo 0.2s facilidade-out; }


. #nav uma 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.

♥ 2- Passo
 <div style = "position: absolute;  esquerda: 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.

para o upload das imagens eu aconselho usar o Imgur , para usa-lo você tem que criar uma conta e depois disso só ir em upload e depois pegar o link da imagem em direct link super fácil....  para pegar o direct link tem que ter conta não se esqueçam 

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



Sem comentários:

Enviar um comentário