Menu Blur

Yes my Lordy! Como amo essa frase rs, otakus entenderão. Bom mas indo ao assunto da postagem, hoje venho trazer um menu que amo! Ele é realmente simples, mas acho seu efeito hover magnifico!  Ele é ótimo para layout/template clean, também pode ser aplicado sobre um banner fica realmente lindo.  Quem quiser ver o exemplo é só clicar no link mais abaixo, então agora vamos ao tutorial?

Brevia do efeito

1. Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa cm o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole:

Códigos

/**MENU BLUR POR SWEETFOLLY **/
.menusf a {padding: 5px ; color: #fff; margin: 2px; font-family: 'Qhytsdakx'; font-size: 27px; letter-spacing: 1px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.menusf:hover a{ text-shadow: 0px 0px 10px #fff; color: transparent; }
.menusf a:hover{text-shadow: 1px 1px 10px rgba(71,80,23,0.6); color: #402056;}
/** Fonte personalizada **/
@font-face {font-family: 'Qhytsdakx'; src: url('http://static.tumblr.com/6vl7vom/d0sm50bns/qhyts__.ttf') format('truetype'); font-weight: normal; font-style: normal;}

Salve!

2. Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:

Códigos

 <div class="menusf">
<a href="LINK">NOME</a>
</div>