Menu com efeito

Oi oi gente! Nesse meu primeiro/segundo post vou ensinar a como fazer esse menu que tem aqui no blog,é bem fácil de fazer,além do efeito ficar lindo *-*! Então,let's go!

Vá em Design-Editar Html , e marque a caixinha ''expandir modelos de widgets''  ,de Ctrl+f ,e ira aparecer uma caixinha de busca ,então pesquise nela por:

                    body { 

   E cole o código a seguir abaixo de  background: $(body.background); :

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 */
}

   VISUALIZE,e se estiver tudo certo salve.

    Agora vá em elementos da página e adicione o gadget  HTML/Javascript ,o código abaixo:

           <a href="Link aqui"><un>Nome Aqui</un></a>

 Aonde esta escrito ''Link aqui'' você coloca o link da página, e aonde esta ''Nome aqui''você coloca o nome da página.
    Lembre-se que cada página que for colocar no seu menu,você tem que colocar o código acima.

E salve.

(OBS: Vi esse tutorial no blog Todas as pequenas coisas)

Bjs ♥