tutorial

Tutorial: Menu light

março 14, 2013,4 Comments

Oi dithingers!
Hoje eu trouxe um menu que pediram na Ask do blog que é um menu bem bonito e serve pra várias coisas. Eu demorei um pouco para achar ele, porem eu roubei do blog do meu irmão e ele nem vai ligar. 
Enfim, para a preview dele clica aqui. (www) O nome desse menu é Menu light e se quiser aprender a fazer ele clica em leia mais. 



Bom ele é muito fácil, o jeito de montar ele é que nem os outros menus, sem muito mistério ou segredo.. Vamos lá? 

Vá em Modelo → Editar HTML → Ctrl+F e procure pela tag: 

]]></b:skin>

Acima dessa tag você cola

kbr {
background:#fff; /* Cor de fundo do Menu */
width: 32%; /* Tamanho do Menu (Largura) */
text-align: center; /* Alinhamento do texto*/
font-size: 11px; /* Tamanho da fonte */
color: #87b1ff; /* Cor da fonte */
letter-spacing:1px; /* Espaço entre as letras */
padding: 3px;
margin: 2px;
float: left;
border-radius: 15px; /* Bordinhas */
border-top:1px #87afff dotted; /* Cor da borda*/
border-left: 1px #87afff dotted ; /* Cor da borda*/
border-right: 1px #87afff dotted ; /* Cor da borda*/
border-bottom: 1px #87afff dotted ; /* Cor da borda*/
-webkit-transition-duration: 1.0s; /* Tempo do Efeito */
}
kbr:hover {
background:#87afff; /* Cor do fundo do Menu ao passar o mouse */
width: 32%; /* Tamanho do Menu ao passar o mouse */
text-align: center; /* Alinhamento do texto a hover */
color: #fff; /* Cor da fonte ao passar o mouse */
letter-spacing:1px; /* Espaço entre as letras a hover*/
padding: 3px;
margin: 2px;
float: left;
border-radius: 5px; /* Bordinhas a hover */
border-top: 1px #3056a4 dotted ; /* Cor da borda a hover */
border-left: 1px #3056a4 dotted ; /* Cor da borda a hover */
border-right: 1px #3056a4 dotted ; /* Cor da borda a hover */
border-bottom:1px #3056a4 dotted; /* Cor da borda a hover */
-webkit-transition-duration: 1.0s; /* Tempo do Efeito */
}

Mude tudo que está em negrito. 

Depois é só salvar, agora você vai em Modelo e adiciona um gadget HTML/JavaScript 
e nele você cola:  

<a href="URL DA PAGINA"><kbr>NOME DA PAGINA</kbr></a>

Repetindo quantas vezes for usar e mudando o que está em negrito pelo o que se pede.

Espero que gostem e credite se usarem. 

Tags: tutorialAuthor: Camila Homs

Lorem ipsum dolor sit amet, cotur acing elit. Ut euis eget dolor sit amet congue. Ut vira codo matis. Sed lacia luctus magna ut sodales lorem.

You Might Also Like

4 comentários:

  1. Anônimo7 de abril de 2013 às 21:37

    peguei muito bom cams

    ResponderExcluir
  2. Anônimo10 de abril de 2013 às 21:42

    não intendi a parte de mudar as coisas em negrito.. :/ #Nath

    ResponderExcluir
    Respostas
    1. Camila Homs11 de abril de 2013 às 00:26

      O que estão em negritos são cores em HTML, você trocará a cor com a ajuda dessa tabela esses numeros podem ser trocados pelos numero correspondente das cores aqui na tabela http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm Espero que tenha entendido.

      Excluir
  3. Anônimo18 de outubro de 2013 às 18:14

    Me ajuda? Eu não to conseguindo achar a tag '-' Já estou a um tempão procurando mais não achei!!

    ResponderExcluir

Assinar: Postar comentários (Atom)