Menu Bounce

Bom dia!

Desculpem meu sumiço, estava sem internet, finalmente consegui resolver o problema.

Trouxe um menu para vocês chamado Menu Bounce, ele é do Tumblr, eu converti o código. Os créditos são do Tumblr HTMLuv♥  que é um Tumblr de HTML perfeito *-*

Vocês podem ver o preview no Tumblr clicando aqui.

Vá no seu HTML e procure por: /b:skin. Acima, cole:

#posiciona{position:absolute; margin-left: 100px; margin-top:10px; width:800px;}
.home{background: url('http://i.imgur.com/LhH4D.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.home:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}}
.ask{background: url('http://i.imgur.com/gsruL.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.ask:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
.about{background: url('http://i.imgur.com/B9wtB.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.about:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.ext{background: url('http://i.imgur.com/QIrEF.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.ext:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
.tem{background: url('http://i.imgur.com/x7I6e.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:1px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.tem:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}

A parte destacada lá em cima é a posição do menu, altere de acordo com seu blog. Baixe o PSD das imagens do menu aqui.

Depois disso, cole em um Gadget de HTML/JavaScript:

<div id="posiciona">
<a href="LINK AQUI" class="home"></a>
<a href="LINK AQUI" class="ask"></a>
<a href="LINK AQUI" class="about"></a>
<a href="LINK AQUI" class="ext"></a>
<a href="LINK AQUI" class="tem"></a>
</div>

Coloquei seus links no lugar de LINK AQUI, feito isso, seu menu está pronto ;)

Veja algumas imagens para esse menu clicando aqui.