36 seguidores gente o/ estou mt feliz! ontem eu estava com 20 hahaha. Pra comemorar, vamos a um tutorial. Hoje vou ensinar como fazer menus. Eu acho que ele vai ajudar a quem esta começando com html agora, pois é facil de fazer e você vai começando a ter noção de alguns codigos e talz... Mais tarde quem sabe eu trago um menu pra vcs! Vamos ao tutorial? ^-^
Você sempre deve por os codigos acima de ]]></b:skin>. Se vc nao por no lugar certo, o menu nao vai aparecer e talvez de erro no seu template. Primeiramente, você tem que criar uma classe:
.nomedaclasse {estilos}
.nomedaclasse é o nome que vc vai dar pro seu menu, ex: .menu. Depois que você deu nome ao seu menu, você vai colocar o estilo. Não entendeu? Eu explico, você vai dizer a cor do fundo, a fonte, o tamanho, as bordas, etc. Você só vai precisar de uma palheta de cores ou você pode inventar uma combinação, mas por favor nada de restart. Abaixo os códigos para você fazer seu menu:
font-family: *fonte*;font-size: *tamanho da fonte* px;text-transform: *tipo de texto: maiúsculo-uppercase , minúsculo-lowercase ou primeira letra maiuscula-capitalize*;font-weight: *fonte em negrito*;font-style: *fonte em itálico*;letter-spacing: *espaço entre as letras do menu* .em ou px;word-spacing: *espaço entre as palavras do menu* .em;line-height: *altura da linha: px ou .em*;background: *fundo cor #ffff; ou imagem (url (LINK-DA-IMAGEM) no-repeat)*;color: *cor da fonte*;widht: *largura do menu* px;height: *altura do menu* px;float: *flutuação do menu center, rigth ou left*;padding: *distancia entre texto e margem* px;text-align: *posiçao em que o texto vai ficar alinhado: center, left ou right*;margin: *distancia entre um link do menu e outro* px;border-radius: *arredondamento das bordas* px;border: 1px solid #000000, 1px dotted #CDCDCD; *determina as caracteristicas da borda. mude os itens rosa*
Depois de editar o codigo com suas preferencias, você pode colocar hover no menu. Para fazer isso você tem que colar abaixo da }:
.nomedaclasse:hover {background: #ffff; *cor do fundo*color: #ffff; *cor da letra*border-radius: *arredondamento das bordas* px;}
Resumindo, seu código vai ficar assim:
.nomedaclasse {font-family: *fonte*;font-size: *tamanho da fonte* px;text-transform: *tipo de texto: maiúsculo-uppercase , minúsculo-lowercase ou primeira letra maiuscula-capitalize*;font-weight: *fonte em negrito*;font-style: *fonte em itálico*;letter-spacing: *espaço entre as letras do menu* .em ou px;word-spacing: *espaço entre as palavras do menu* .em;line-height: *altura da linha: px ou .em*;background: *fundo cor #ffff; ou imagem (url (LINK-DA-IMAGEM) no-repeat)*;color: *cor da fonte*;widht: *largura do menu* px;height: *altura do menu* px;float: *flutuação do menu center, rigth ou left*;padding: *distancia entre texto e margem* px;text-align: *posiçao em que o texto vai ficar alinhado: center, left ou right*;margin: *distancia entre um link do menu e outro* px;border-radius: *arredondamento das bordas* px;border: 1px solid #000000, 1px dotted #CDCDCD;}.nomedaclasse:hover {background: #ffff; *cor do fundo*color: #ffff; *cor da letra*border-radius: *arredondamento das bordas* px;}
Agora seu menu vai estar quase pronto. Pra coloca-lo em seu blog, vá em layout > adicionar gadget > html/javascript e cole o código abaixo. Você pode colar ele quantas vezes quiser, dependendo de quantos botões você vai querer.
<div class="nomedaclasse"><a href="http://link do botão">o q você quer que apareça no botão </a></div>
Agora seu menu vai estar pronto!! Espero q tenha sido útil! Não esqueçam de comentar. xoxo
Nossa que de mais, estava procurando esse tutorial a milénios. Amei! Beijos ♥
ResponderExcluirMeu Blog (segue?): www.justgirl-oficial.blogspot.com
Página do meu blog (curte?): https://www.facebook.com/justgirlblog
Blog da minha amiga (segue?): www.worldshone-oficial.blogspot.com
aushuahsuahush vlw claro q sigo u.u
ExcluirMuito legal o tutorial. Mas eu nao consigo nem a pau, acho kkkkkk
ResponderExcluirbeijo-de-cereja.blogspot.com
ashuahsuahushau er facin o/ ruth santenha u.u
ExcluirOi Diwa USHAUSHUAS amei seu blog e não vejo a hora de você fazer o lay do meu, cara não sei nada sobre HTML, e você manda muito bem, isso aqui ta incriável, amei o tutu.
ResponderExcluirKisses para essa diwa linda *-*
barbiemyfashiondoll.blogspot.com.br
hahah brigada bia >< bjus sz
ExcluirAdorei o tuto <3 fazer menus é muito legal, me acalma haha.
ResponderExcluirDurgadas e viciadas na c-box kkk.
photoscapeevc.blogspot.com
<3 altar macconias na xbox kkkk' vlw sz
ExcluirOi Hayley, também estou viciada na CBox da Kaorii, lembra de mim? KPOSASKP
ResponderExcluirSempre quis fazer menus -eu mesma-, só sabia de tutoriais e me creditava sempre por ser o gênio de conhecer o menu do Blogger -sou idiota rçrç
Beijos
http://caprichosde-garotas.blogspot.com.br/
claro que lembro de vc diwa ausuahsuh bjus
ExcluirA Cbox da Kaorii vicia mesmo ISHAUSHAISHAI'
ResponderExcluirAdorei o tutorial o3o ~
- Modern HTML
ahsuhaush vlw viciada² kkk'
ExcluirAjudou bastante , eu não sei como fazer menu mas esse tuto me ajudará.
ResponderExcluirhttp://morango-mordido.blogspot.com.br/
Fico feliz em ter ajudado o/
ExcluirQue legal* super explicado
ResponderExcluirhttp://fabiolucas92.blogspot.com.br/
vlw ><
ExcluirValeu pela ajuda!
ResponderExcluirSabia que uma tal de ~WMYB~ lá na cbox do KW sou eu?
hhahaha, no, agora eu sei u.u
ExcluirAmei esse post!! Todos os outros tutoriais que eu via por aí não explicavam quase nada, o seu ficou perfeito!! Eu também viciei na c-box haha
ResponderExcluirbeijos
Obrigada auhsuahahsuh c-box = vida e.e bjus
ExcluirClaro que não, retribuo sim! Boa sorte com teu blog ^^
ResponderExcluirEu consegui viciar na cbox de lá hehehehehe. Amei o post, ainda mais, que não consigo fazer menu!
ResponderExcluirashuahashu somos viciados e.e
Excluir