1 de mar de 2012

Menu em forma de gota



Vou ensinar vocês um tutorial diferente, que é um menu em forma de gota, quando passa o mouse e ele fica redondo.
Vamos lá.

Vá dem Design Editar HTML marque a caixinha "Expandi modelo de windet"
Tecle CTRL+F ou F3 e procure por:
]]></b:skin>
Quando achar essa tag, cole esse seguinte link bem acima dela:
/ Inicio do menu /
ct {
font-family: century gothic; /* Fonte do Menu */
width: 10%; /* Tamanho do Menu */
float: left;
background:#FF82AB; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 11px;
-webkit-border-top-left-radius: 1px;/* Efeito das bordas */
border-radius: 11px;
border-top-left-radius: 1px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
}
ct:hover {
font-family: century gothic; /* Fonte do Menu quando passa o mouse */
width: 10%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#eee; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 22px;
border-radius: 22px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte do Menu quando passa o mouse */
font-style:bold; /* Fica em negrito quando passa o mouse */
color: #000; /* Cor da fonte do Menu quando passa o mouse */
}
/ Fim do menu /

Agora para que a paginas apareçam no blog, você deve add um gadget o HTML/JavaScript com esse código aqui.
 <a href="Link da pagina"><ct>Nome da pagina</ct></a

3 comentários :

  1. OOi Passei para avisar que estou com vagas para moderação abertas

    http://fikaaqui.blogspot.com/

    ResponderExcluir
  2. nao sabia amis ameei o resultado rs
    Ameei seu blog Maravilhosos *--*
    da uma passadinha la no Portal Disturbia Ficaria Feliz ?
    http://pdisturbia.blogspot.com/

    ResponderExcluir
  3. Olá! Eu gostei muito de seu blog e sigo. Gostaria de saber se aceitas afiliação, seria uma honra. Se aceitar, responda por um comentário em meu blog!
    http://uma-pequena-borboleta.blogspot.com.br/

    ResponderExcluir

Sem chingamentos porfavor ;)
Todos os comentários serão respondidos.