Como Fazer Um Menu

Hey people! Gente, estou viciada no cbox do kawaii world ashuahsuah altas durgs lá. 

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