Tutorial: Menu CupCake

Heeeey My Amoorecoos ,, Coomo Paassaram a Virada do Ano ? a Minha Fooi ótima :),, Boom ... Como já viram hoje trago um Tutorial Para vocês que é " Menu CupCake "  Doou todos os créditos desse tutorial ao blog " Camila's Designes " ,, Boom vamos Ao tutorial ! Cliquem Em Leia Mais

Olha como vai ficar o Menu

Vá em modelo → editar html → prosseguir e procure por:

]]></b:skin>

Ao encontrar a tag acima, copie o código seguinte e cole acima dela:

/* --- MENU CUPCAKE - BY CAMILA'S DESIGNS --- */
cupcake {
  width: 27%; /* largura do menu */
  margin: 3px; /* margem entre os links, não altere */
  padding: 3px; /* espaço entre os links e a margem, não altere */
  float: left; /* alinhamento do menu, não altere */
  background:#000000; /* cor de fundo */
  color:#FFF; /* cor do link */
  font-family: Arial; /* tipo da fonte */
  font-size: 9px; /* tamanho da fonte */
  text-align: center; /* alinhamento centralizado do link */
  text-transform: uppercase; /* transformação do texto */
  border-radius:5px; /* borda arredondada */
  -webkit-transition-duration: .90s; /* tempo de transição, não altere */
}

cupcake:hover {
  background:#EEEEEE; /* cor do menu em hover */
  color: #333333; /* cor do link em hover */
  border-radius:10px; /* borda arredonda em hover */
}

Edite o menu conforme a identificação do código, altere as cores, a fonte, a borda arredondada etc. Se tiver conhecimento em CSS, pode fazer alterações nos códigos identicados com "não altere". Depois de fazer a alteração no código, visualize o modelo e veja se o seu template está normal. Salve se estiver tudo certo.
Agora vamos adicionar os links. Vá em layout → adicionar um gadget → html/javascript e cole o código abaixo no gadget adicionado:

<a href="LINK"><cupcake>NOME</cupcake></a>

Edite o código com o link e o nome, para cada link que deseja adicionar ao menu, use o código acima. Salve e está feito. É bem simples!

Espero que tenham Gostado !

Beeeijos