Menu- Roll Right

Yoo gurizada ^^

Vou enrolar vocês nesse parágrafo, porque a minha criatividade hoje está um lixo. Finjam que é algo divertido e comecem a rir, masoq? Ontem foi feriado aqui onde eu moro, um feriado que eu não sei porque sou idiota, mas não fez diferença alguma porque estava de férias. Fiquei o dia mexendo no meu notebook, como sempre, e assisti o comecinho do Harry Potter e a Pedra Filosofal dublado, infelizmente .-.. Ah, ontem finalmente fiz a famosa progressiva no meu cabelo, só que isso já está me enchendo! Tenho que ficar três dias sem prender e fazer qualquer coisa no cabelo. Acredita que o cabeleireiro disse para eu dormir com a cabeça fora da cama? Pois é, como é que faz isso? 

Nossa, ficou bem grandinho até o parágrafo, não? Sirvo bem para enrolar vocês u_u. Enfim, pediram na ask um menu horizontal. Eu tentar fazer um, mas não deu certo, então trouxe um do Kawaii World, um blog que acho que todos conhecem. Eu quis trazer um que não fosse tão conhecido, mas sei lá, espero que não seja. Eu já usei-o em um layout que fiz para o meu blog, e eu achei que ficou tão fofo :3. Clique aqui para ver o preview (primeiro gadget, o do topo!). Vamos ao tuto?

1- Vá em Modelo > Editar HTML e  procure por ]]></b:skin> (apertando Ctrl F). Acima de  ]]></b:skin>, cole o código abaixo:

#menu{

background: url(URL DA IMAGEM) 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(URL DA IMAGEM) left ;

 color: #5f5147;

2- Substitua a parte em negrito pelo o link de sua imagem, lembrando que deve ser a mesma imagem nos dos links. Depois disso, adicione um gadget HTML/Javascript e cole o código:

<a href="LINK" id="NOME">Link</a>

Substitua o que se pede e prontinho! 

Vou colocar algumas imagens que se pode usar nesse menu, para facilitar: (a segunda cor é a aparece primeiro no menu!)

Prontinho *-*. Alguma dúvida, pergunte nos comentários aqui ou na minha ask :). Espero que tenham gostado! Os créditos vão para o Worldesigns, porém, eu achei-o no Kawaii World. As imagens também são de lá! Ah, e caso você utilize esse menu, um dica minha é juntar a área de posts com o cabeçalho, para tirar aquele espaço feio que fica! Beijos e até a próxima postagem!