Menu Simples - Efeito Hover

       

Hello, chocolates !

Hoje trouxe meu primeiro tutorial.E um menu super simples e bonitinho que você pode personalizar !

1.Vá em modelo > Editar html.Você vai dar de cara com este código :

Clique nos pontinhos e o HTML irá se abrir.Agora clique no grande quadro cheia de códigos, e aperte Ctrl + F.

Pesquise por ]]></b:skin> e acima cole :

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }a.menupequeno {background-color: #COR DE FUNDO;padding-top: 3px;padding-bottom: 3px;display: inline-block;width: 40px;font-size: 8px;font-family: silkscreen;text-transform:  uppercase;text-align:center;border: 1px solid #COR DA BORDA;letter-spacing: 1px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;box-shadow: inset 0 0 5px #e3e6e7, 0 0 1px #b6b6b6;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;text-shadow: 0 1px 0 #COR DA LETRA;}a.menupequeno:hover {border: 1px solid #COR DA BORDA HOVER;background-color: #COR DE FUNDO HOVER;text-decoration: none;box-shadow: inset 0 0 0px #e3e6e7, 0 0 0px #b6b6b6;text-shadow: 0 1px 0 #COR DA LETRA HOVER;opacity: 0.8;}

                             O que está em negrito, você troca por html de cores, seguindo as indicações.
                                                           Lhe indico esta tabela de cores.

                                       
                 2.Depois de ter editado, colado e salvado, vá em Layout > Adicionar um Gadget >HTML/JS , cole este código no gadget :

                                                                  
                                                                        <center>
                                <a class="menupequeno" href="SEULINK">Nome</a>
                                <a class="menupequeno" href="SEULINK">Nome</a>
                                <a class="menupequeno" href="SEULINK">Nome</a>
                                                                       </center>

                                                           

                                                                     Créditos ao : KW