Não sei como se chama isso...

Olá pessoas como estão?

Como faz um tempinho que não posto tutoriais hoje resolvi vir com um para vocês.

E nesse tutorial eu vou ensinar a fazer um menu igual o daqui do blog, o tuto é meio grandinho mas é porque eu não to ensinando só como fazer mas também como personalizar, então vamos lá.

O resultado é esse:

Onde está azul escuro é  menu quando o mouse não está por cima e onde está cinza é é o menu quando o mouse passa por cima, e você pode colocar as cores que quiser.

Vá em Design - Editar Html

marque a caixinha 'expandir modelos de widgets'

Pressione Ctrl + F vai aparecer uma caixinha de busca

nela pesquise por:

body {

e cole o código abaixo depois da última chave -->  }

exemplo

Código

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

Salve.

Vá em elementos de página e adicione um gadget de Html

no Gadget cole o código abaixo:

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

Onde está escrito Nome aqui você coloca o nome da página e onde está escrito Link aqui você coloca o link da página.

Exemplo se você colocar Home como nome da página coloque o Link de home onde está Link aqui.

Lembrando que cada página que você for colocar no seu menu você tem que colocar o código acima.

Salve.

Personalizando o seu menu

Para personalizar o seu menu, vá novamente em Editar Html, procure o seu meu, um jeito fácil de procurar é pela caixinha de busca, aí é só colocar Fonte do Menu na caixinha de busca que aparece a primeira parte dele.No próprio código do menu tem indicando o que são as coisas para você colocar como quiser, mas eu vou ensinar duas coisas que talvez vocês podem não sabem só vendo.

Personalizando a cor

Pra personalizar a cor é necessário colocar o código da cor.

exemplo, no código está assim:

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

onde está em vermelho é o código da cor, para pegar o código da cor que deseja clique aqui.

Formato do seu menu

para determinar o formato, você tem que alterar essa parte do código:

-webkit-border-radius: 0px 30px 0px 30px;

Se onde está 30px você colocar 0px ele vai ficar quadrado, assim:

Agora se você quer ele redondo, troque onde está 0px por 30px, aí vai ficar assim:

Lembrando que quanto mais você aumentar o valor, tipo, de 30px pra 40px, 45px etc, mais redondo ele vai ficar.

E quanto mais você diminuir o valor, tipo, de 30px pra 25px, 10px etc, mais quadrado ele vai ficar.

Pra ficar com as pontinhas que nem no meu, tem que deixar que nem ta no código, mas quanto mais você aumentar o valor de onde está 30px mais inclinado o menu fica, assim:

E quanto mais você diminuir o valor de onde está 30px menos inclinado fica, assim:

Enquanto você for modificando, vá visualizando pra ver se fica do jeito que você quer, depois é só salvar e pronto.

Créditos:Todas as pequenas coisas