Tutorial- Menu horizontal

Olá algodões doce! Então, muita gente me pediu pra eu fazer um tutu, explicando como ponho esse menuzinho do blog. Ele é um menu com efeito em fade, então quando eu passo o cursor fica de um jeito e sem encostar fica de outro..

 Então, hoje eu vou fazer o tutorial, explicadinho pra vocês okay?

Olhem ai:

sem mouse em cima:

com mouse em cima da abinha " sobre": 

No meu menu eu escolhi um Lilas bem clarinho pro menu normal, e um rosinha bebe pro menu em fade.. O tutu é bem fácil, mais antes de ensinar, queria falar que estou participando de um concurso lá no blog da Jackie [www] E queria que vocês votassem em mim, apartir do dia 17 okay? E quem quiser participar, corre lá, no link que eu deixei ali em cima ^^ .

Clique em Continue Lendo pra Ver o Tutorial!

Olha o tutu ai:

1° passo: Vá em Design>Editar HTML> Marque a Caixinha "EXPANDIR MODELOS WIDGET"> Aperte as Teclas CTRL F e pesquise por:

body {

2° Passo: Essa tag ali  ^^  vem acompanhada de um outro codigo, depois dele vem essa ultima chavinha akiee --> } então cole o código abaixo dessa chave:

un {
font-family: Tahoma; /* Fonte do Menu */
width: 25%; /* Tamanho do Menu */
float: left;
background:#C6D3E3; /* Cor do fundo do Menu */
padding: 5px;
text-align: center; margin: 2px;
-moz-border-radius: 03px;
-webkit-border-radius: 30px 0px 30px 0px;
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}

un:hover {
font-family: Tahoma; /* Fonte do Menu quando passa o mouse */
width: 25%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#7897BC; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-moz-border-radius: 03px;
-webkit-border-radius: 0px 30px 0px 30px;
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}

3° Passo: Visualise, se seu template continuar do jeito que estava antes, salve.

4° Passo: Agora estamos na reta final. Vá em elementos de página>adicionar gadget>htmljavascript e cole o código ai embaixo:

<a href="Link da página"><un>Nome da página</un></a>

Este código ali em cima ^^ você vai repetir a cada página que você tiver, pra editar ele é o seguinte:

Personalizar O que está escrito, e Link:

  Link da página: você coloca o link pra onde você quer que o menu leve os leitores

ex: http://charmosinhabeauty.blogspot.com

  Nome da página: você coloca o nome da página onde você vai levar seus leitores

ex: HOME

Personalizar Fonte do Menu:

De CTRL F e pesquise por:

/* Fonte do Menu */

Onde está Tahoma você troca pela sua preferida, ex: Comic Sans MS, Calibri, Arial..

Personalizar Tamanho do Menu:

São duas frases pra personalizar o tamanho, e você vai acha-las rapidinho..  

/* Tamanho do Menu */

/* Tamanho da fonte do Menu quando passa o mouse */

E troca pelo tamanho que você quiser, o meu eu coloquei 14.

Personalizar a Cor do Menu:

Pra personalizar as cores eu recomendo você virem aqui.

background:#C6D3E3; /* Cor do fundo do Menu */

Você troca pela cor que quiser, mas quando o menu está sem o mouse por cima.

color: #fff; /* Cor da fonte do Menu quando passa o mouse */

Você troca pela cor que quiser, mas é quando o mouse está em cima do menu. 

E Pronto, deu certinho?