Menu de Categorias

Página de tutoriais quase completa! Confiram (xx)

Boa tarde, galera.

Estou triste e preocupada, minha mãe está internada num hospital de Torres desde ontem, ela tá com infecção urinária grave, é provável (nada certo) de que ela saia de lá só na segunda-feira, meu pai só vem pra casa de noite para descansar, aí eu tenho que ir dormir na casa dos meus avós (que são meus vizinhos, aliás), almoçar e jantar lá, o resto do dia eu fico em casa mexendo no computador, lendo e fazendo outras coisas típicas de mim.

Mas tirando todas as preocupações, estou muito feliz pelos comentários na minha primeira postagem, obrigada, gente ♥

Resolvi trazer um tutorial visto no blog POM, então todos os devidos créditos a ele, certo?

Visualize o menu clicando aqui.

Enjoy ~

1. No seu HTML, pesquise pelo famoso ]]></b:skin> e antes desse código que você encontrou cole isso: 

/*-Menu de Categorias por Part Of Me -*/
Categorias {
font: normal normal 11px 'Verdana', Helvetica, FreeSans, sans-serif; /*-fonte do Menu-*/width: 96%; /*-largura-*/float: left; /*-posicionamento do menu-*/
background: transparent; /*-cor de fundo-*/
border-bottom: 1px solid #97bd51; /*-cor da borda de baixo-*/
padding: 2px; /*-altura-*/
text-align: center; /*-posicionamento do texto-*/
margin: 2px; /*-espaço-*/
-webkit-transition: 0.5s linear; /*-não precisa mexer aqui-*/
font-size: 11px; /*-tamanho da fonte-*/
color: #4f4f4f; /*-cor da fonte-*/
}
Categorias:hover {
font: normal normal 11px 'Verdana', Helvetica, FreeSans, sans-serif; /*-fonte do Menu Hover-*/
width: 96%; /*-largura hover-*/
float: left; /*-posicionamento do menu-*/
background: #97bd51; /*-cor de fundo hover-*/
border-bottom: 1px solid #fa7a57; /*-borda de baixo hover-*/
padding: 2px; /*-altura hover-*/
margin: 2px; /*-espaço-*/
-webkit-transition: 0.5s linear;
color: #ffffff; /*-cor da fonte hover-*/
letter-spacing: 3px; /*-espaço das letras hover-*/
border-radius: 10px; /*-bordas arredondadas hover-*/
}

2. Pronto? Agora salve o modelo, vá no layout (elementos de página) e crie um novo gadget html java-script, no mesmo coloque um título (opcional) e cole:

 <a href="LinkdaCategoria"><Categorias>NomedaCategoria</Categorias></a>

Vá duplicando quantas vezes quiser até fechar suas categorias.

Espero que tenham gostado do tutorial.

Beijos e fui ~