3.7.12

Menu Slim


Olá minhas cerejinhas! Estou muito feliz,porque finalmente estou aprendendo a mexer em HTML *-* E hoje eu criei meu primeiro menu sozinha! Não consigo expressar o quanto estou feliz! Bom,vamos direto ao ponto. Como eu criei ele, resolvi chamá- lo de Menu Slim, não sei porque '-'. 

Ele é assim:


( clique na imagem para ver maior)


Onde está azul é ele normal, e onde ele está rosa e aparecendo o escrito é com o mouse em cima. Clique em Leia Mais para ver o tutorial. 




Vá no seu HTML e procure por 
]]></b:skin>
Cole o código abaixo ACIMA dessa tag:


/*---Início do Menu by Teen World---*/
un {
font-family: tahoma; /* Fonte do Menu */
width: 79%; /* Tamanho do Menu */
float: left;
background: #fff; /* Cor do fundo do menu */
padding: 7px;
text-align: center; 
margin: 0px;
-moz-border-radius: 90px;
-webkit-border-radius: 1px 21px  21px 1px ; /* tamanho das Pontinhas da Borda */
border-right: 6px solid #4682B4;/* Tamanho e cor da pontinha redonda da borda */
border-top: 1px solid #4682B4;/* Tamanho e cor do contorno de cima */
border-bottom: 1px solid #4682B4;/* Tamanho e cor do contorno de baixo */
-webkit-transition-duration: .80s; /* Duração do Efeito */
font-size: 8pt; /* Tamanho da fonte */
color: #4682B4; /* Cor da fonte*/
}
un:hover {
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 179%; /* Tamanho do Menu quando passa o mouse */
float: left;
background: #fff; /* Cor do fundo do Menu quando passa o mouse */
padding: 7px;
text-align: center; 
margin: 0px;
-moz-border-radius: 90px;
-webkit-border-radius: 1px 21px 21px 1px; /* tamanho das Pontinhas da Borda quando passa o mouse*/
border-right: 7px solid #FA8072;/* Tamanho e cor da pontinha redonda da borda  quando passa o mouse*/
border-top: 1px solid #FA8072;/* Tamanho e cor do contorno de cima quando passa o mouse*/
border-bottom: 1px solid #FA8072;/* Tamanho e cor do contorno de baixo quando passa o mouse*/
-webkit-transition-duration: .80s; /* Duração do Efeito  */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #000; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu by Teen World---*/

 Não tem nada o que explicar, pois tudo para a edição está entre /* 

Depois vá em adicionar um gadget, eu recomendo clicar em adicionar aqui, pois como eu cliquei aí, o código está pronto, mas se você clicar em outro lugar vai ter que editar os dados:


Como ia dizendo, clique em adicionar um gadget > HTML /javscript e cole o código:

<div style="position: absolute; margin-top: -340px; left: -362px;">
<a href="Link aqui"><un>Home </un></a>
<a href="Link aqui"><un>F.A.Q </un></a>
<a href="Link aqui"><un>Goodies </un></a>
<a href="Link aqui"><un>Sobre </un></a>
</div>

Onde está sublinhado você coloca e link da página, e onde está em negrito coloque o nome. Onde está em itálico são os comandos para onde o menu vai ficar. Quanto mais você diminuir o primeiro mais para cima o menu vai, e quanto mais você diminuir o segundo mais para a direita ele vai, e quanto mais aumentá-lo mais pra esquerda ele vai, MAS NÃO TIRE O SINAL DE -, PORQUE O MENU VAI IR TOTALMENTE PARA FORA! Depois salve. Se o menu não estiver aparecendo é porque a tela do seu PC ou Notebook é pequena, então DIMINUA o número do segundo itálico.

Espero que tenham gostado do meu humilde menu *-*


11 comentários:

  1. Nossa que legal,teve ter dado bastante trabalho né?fica um resultado legal pela imagem mais tenho preguiça de fazer menus http://cinnamoncake-br.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nem deu trabalho, é só entender o código :)

      Excluir
  2. Oi fofa, adorei o tuto! acho que vou usar no meu próximo layout.

    mas então, você foi a primeira a acertar as respostas no game lá do meu blog, parabéns!

    me passe seu e-mail para mim fazer sua entrevista.

    bjoo

    http://morango-aos-pedacos-mp.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. OMG É a prmeira coisa que eu ganho !! Tô muito feliz!! O e-mail é barbaragomes0@hotmail.com

      Excluir
    2. Oi, te mandei um e-mail, tem como responder?
      bjoo
      http://morango-aos-pedacos-mp.blogspot.com.br/

      Excluir
  3. Parabéns! Ah eu ainda nem sei fazer isso... IHIHIHIH..
    Beijos. :)

    http://coresamoresedissabores.blogspot.com.br/

    ResponderExcluir
  4. Amei o menu eu ainda nem sei fazer :(
    Vim avisar que a enquete de duelo de blogs e que vc está participando, já está na sidebar.
    www.cereja-com-morango.blogspot.com

    ResponderExcluir