Menu personalizado!!

  Yooo, gente tudo bem?? Vim hoje ensinar vocês a personalizar o menu do blog. Já havia aprendido ja faz um tempinho e vou mostrar pra vocês como se faz ^^ É bem simples e fácil vamos lá u.u

   Eu aprendi fuçando (como sempre XD) o blog do Reino Kawaii que amo de paixão *w* sempre que quero aprender algo novo pra editar meu humilde blog T^T eu olho sempre ele, é muito bom mesmo e sempre tem tutoriais fáceis de fazer.

  O menu que ela ensina fica assim:

  Eu deixei por um tempo igual o que ela ensinou este ai de cima, mas com o tempo aprendi a mudar as cores, o efeito e mudar o tamanho... e deixei assim:

  O dela é mais fofinho por ser coloridinho e tals, o meu não queria muito colorido e pela imagem ta ruim de ver que deixei as letras rosa claro e ficou pixelado (é assim que se escreve produção??)... enfim, mas vocês podem deixar do jeito que quiserem, claro que é bom lembrar que qualquer errinho uma virgula errada no HTML você pode acabar fazendo uma bagunça no seu layout...

 Enfim, vamos começar, vá no Modelo >> Editar HTML  e procure por ]]></b:skin>  quando achar coloque o código a seguir acima dele...

a.mc {
width: 100px;
height: 100px;
color:#000000;
background: #66CCFF;
box-shadow: 3px 3px 3px #000000;
border-radius:5px;
font-size:14px;
text-align:center;
text-shadow: 1px 2px 3px #FFFFFF;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc:hover {
text-decoration: none;
background: #FFFFFF;
-webkit-transition:2s;
}
a.mc1 {
width: 100px;
height: 100px;
color:#000000;
background: #66CCFF;
box-shadow: 3px 3px 3px #000000;
border-radius:5px;
font-size:14px;
text-align:center;
text-shadow: 1px 2px 3px #FFFFFF;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc1:hover {
text-decoration: none;
background: #FFFFFF;
-webkit-transition:2s;
}
a.mc2 {
width: 100px;
height: 100px;
color:#000000;
background: #66CCFF;
box-shadow: 3px 3px 3px #000000;
border-radius:5px;
font-size:14px;
text-align:center;
text-shadow: 1px 2px 3px #FFFFFF;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc2:hover {
text-decoration: none;
background: #FFFFFF;
-webkit-transition:2s;
}
a.mc3 {
width: 100px;
height: 100px;
color:#000000;
background: #66CCFF;
box-shadow: 3px 3px 3px #000000;
border-radius:5px;
font-size:14px;
text-align:center;
text-shadow: 1px 2px 3px #000000;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc3:hover {
text-decoration: none;
background: #FFFFFF;
-webkit-transition:2s;
}

  Agora vamos entender um pouco desses códigos marotos...

width:          >> largura*

height:         >> altura*     

color:          >> cor que muda quando passa o mouse sobre o menu*

background:     >> cor da caixa do menu*

box-shadow:     >> cor da sombra da caixa do menu*

border-radius:  *não mexa*

font-size:      >> tamanho da fonte

text-aling:center; *não mexa*

text-shadow:    >> cor do texto que muda quando passa o mouse sobre o menu*

  ATENÇÃO: mexa somente para modificar as cores que são os códigos que começam com "#"(anote ou tenha o código para trocar as cores, no blog do Reino Kawaii tem esses códigos, procure  por >>"tabela de cores"), se for mexer na altura e largura coloque números não muito grandes...

  Depois de ter editado e colocado o código não esqueça de salvar.Depois vá no Layout e adicione o botão de HTML/JavaScript  e cole o seguinte código: 

<a class="mc" href="URL-LINK-1">NOME DO LINK</a>
<a class="mc1" href="URL-LINK-2">NOME DO LINK</a>
<a class="mc2" href="URL-LINK-3">NOME DO LINK</a>
<a class="mc3" href="URL-LINK-4">NOME DO LINK</a>

 Coloque apenas o URL "endereço do link" desejado e o nome do link. Salve!!!

  É isso ><  é bem simples e fácil e também o que pude aprender, espero que tenham gostado u.u kissu até o próximo post ^3^