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 *-*
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/
ResponderExcluirNem deu trabalho, é só entender o código :)
ExcluirOi fofa, adorei o tuto! acho que vou usar no meu próximo layout.
ResponderExcluirmas 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/
OMG É a prmeira coisa que eu ganho !! Tô muito feliz!! O e-mail é barbaragomes0@hotmail.com
ExcluirOi, te mandei um e-mail, tem como responder?
Excluirbjoo
http://morango-aos-pedacos-mp.blogspot.com.br/
flor, responde o e-mail!
ExcluirParabéns! Ah eu ainda nem sei fazer isso... IHIHIHIH..
ResponderExcluirBeijos. :)
http://coresamoresedissabores.blogspot.com.br/
Obrigada linda!
ExcluirAmei o menu eu ainda nem sei fazer :(
ResponderExcluirVim avisar que a enquete de duelo de blogs e que vc está participando, já está na sidebar.
www.cereja-com-morango.blogspot.com
Ok, obrigada por avisar!
ExcluirAmeeeeeeeei, tá lindo.
ResponderExcluir