02/02/2013

Tutorial: Menu Roll Right

||

Ohayooo! Boa noite a todos, venho trazer mais um menu para vocês ele se chama "Roll Right", eu não tenho palavras para descrever ele de tão lindo que é, então vejam aqui. Lindo não é? Eu já vi ele em outro blog, mas tive muita vergonha de perguntar e finalmente eu achei. \o/ Então trago ele agora para vocês, mas antes créditos de Worldesigns e ao KW.  Vamos ao tutorial agora?


Vá ate seu HTML, e procure por ]]></b:skin>, acima dele adicione:
#menu{
background: url(http://static.tumblr.com/jyjxgdu/2Humbnktp/menu.png) right ;
width: 110px;
float: left;
height: 20px;
font: 20px Play;
color: #fff;
padding: 2px 0 6px 0;
text-align: center;border-radius: 7px;
margin: 5px;
text-transform: uppercase;
cursor: default;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#menu:hover {
opacity: .95;
background: url(http://static.tumblr.com/jyjxgdu/2Humbnktp/menu.png) left ;
 color: #5f5147;
}

Arrume a parte em negrito pelo o endereço da sua imagem, a mesma imagem tem que se repetir nos dois links. Salve é vá ate seu layout, então crie um gadget HTML/Javascript, dentro cole o código:

<a href="link" id="menu">Link</a>

2 comentários:

  1. Bem legal o menu.Participa do meu mini-game?Beijos
    lembrando-carol.blogspot.com.br

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram