Menu estilo Tumblr: Menu OUT






Boa noite, leitores. 

Hoje trouxe para vocês um menu parecido com os menus do Tumblr. Os código foram todos achados no Kawaii World.


Visualize aqui o menu


1. Cole o seguinte código no seu html * acima de  ]]></b:skin> *

.menu {width: 100px; font-size: 18px;  font-family:'Stars From Our Eyes'; color: #fff; float:left;  letter-spacing:1px; text-align:center; margin:2px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px); }.menu:hover {-webkit-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);}/** Fonte personalizada **/@font-face {font-family: 'Stars From Our Eyes';src: url('http://static.tumblr.com/mmrynko/17Dm6e4ef/starsfromoureyes.ttf') format('truetype'); font-weight: normal; font-style: normal;}

Você muda somente o que está sublinhado
Width equivale a largura do menu.Font-size ao tamanho da fonte do menu.Font-family é a fonte do menu. Se você não quiser essa, mude e apague de /**Fonte Personalizada **/ até o final.Color é a cor do menu.Float: left é o alinhamento, no caso está a esquerda. Pode por Rigth também.

2. Agora pra usar, é só ir em Adicionar HTML >> Java/Script e colar:

<a href="link" class="menu"> <div style="COLOR: #fff;">Home</div></a>

Em link você adiciona o link desejado, em color é a cor do menu e Home o que aparece. (:
Para cada nova página (ex. home, contato, goodies...) você cola o código acima.

0 leitores soltaram o verbo:

Postar um comentário

Leia, é importante!

- Todos os comentários serão lidos e quando possível, respondidos;
- Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
- No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
- Encomendas e pedidos deverão ser feitos na Ask (menu).

Obrigada por comentar e volte sempre!