Menu Splasher

Boa noite!

Hoje trouxe um menu que foi  convertido para o Blog do Tumblr I ♥ Themes. Então créditos para ele.

O Menu é fofo e ao mesmo tempo um pouco diferente,podendo deixar o Blog com um destaque a mais.

Live Preview - Menu

Clique em "continue lendo" para ver os códigos!

1º - Procure por ]]></b:skin> e acima da tag cole o seguinte código:

/***Menu Splasher**/ .navsm{float:left; overflow: hidden;background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#fff));display: inline-block; padding: 2px; text-align: center; color:#aaa;margin:1px; line-height:40px;height:40px;width:40px;font-size: 10px;font-family: 'Play', sans-serif; -webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;transition: all 0.5s linear;border-radius:100px; border: 1px solid #d6d6d6;}.navsm:hover {height:56px;background:#eee;color:#aaa;}.navsm img{width:18px;margin-top:10px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; }.navsm:hover img{-webkit-transform: rotate(360deg); }

2º - Adicione um Gadget HTML/JavaScript e cole o seguinte código onde quer que apareça o Menu.

<a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/home.png" /><br />Home</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/mail_2.png" /><br />Ask</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/delete.png" /><br />Dash</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/photo.png" /><br />Fotos</div></a><a href="LINK"><div class="navsm"><img src="http://i.imgur.com/6HkBz.png" /><br />Credits</div></a>