01/02/2013

Tutorial - Menu Cupcake

La gente buena noche :3
Como vocês estão ? Eu estou explodindo de felicidade. Bom, hoje de tarde estava pensando em criar um blog pra mim de HTML. Mais não é por isso que estou feliz, ainda não decidi se vou fazer ou não. O motivo da minha felicidade é que voltei com o meu namorado *-* /Grande coisa.

Mudando de assunto. Hoje vou ensinar um menuzinho que vi lá no Camila's Designer. Já usei ele em 2 Layouts e acho ele super lindo ! Clique aqui e veja como ele é. Eu deixei ele com o fundo todo branco, mas você pode personaliza-lo da forma que quiser e com duas cores porque ele tem o modo hover.
Vamos lá ?


Vá em modelo  Editar HTML  Prosseguir e procure por : ]]></b:skin>

Cole esse código acima da tag procurada.

/* --- 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. 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.
Layout  Adicionar gadget  html/javascript  e cole :

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

Essa parte nem precisa explicar né ?
Gostaram ? ~^

10 comentários:

  1. Ele é bem simplesinho, mais porém fofo e pratico.
    Talvez use o3o sou viciada em menus
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  2. Acho que vou usar o.o perai que vou testar no blog -q

    Kissus, http://garota-atrapalha.blogspot.com.br/

    ResponderExcluir
  3. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  4. Flor , tive que por seu post lá no RT nos rascunhos.
    A Kaori foi lá reclamar de plágio .
    Se eu não tirar ia dar problema para o RT '

    ;;;;;;;;;;;;;;;;;;;;;;'

    ResponderExcluir
  5. Esse tutorial esta em vários blogs e já estava rodando há muito tempo .-.

    ResponderExcluir



Por favor, não peça nada pelos comentários, para isso temos a nossa Ask.

Os comentários daqueles que não se indentificarem seram publicados, mas não serão respondidos.

A moderação de comentários está ativa, tome cuidado com o que fala!

Pedidos de afiliação só ná página de afiliados

Não respondo mais comentários do tipo "seguindo segue de volta?"

Nao tenha preguiça de comentar, comentar nã vai fazer seus dedos caírem.