Menu fofo

 

O exemplo de menu é esse:

Como podem ver, o menu possui bordas diferentes quando está em estado normal e quando está em estado hover. Isso é crazy border.

Bem, vá em design → editar html e procure pela tag ]]></b:skin>, copie o código seguinte e cole ANTES dessa tag:

/* MENU CRAZY BY CAMILAS DESIGNS */
cd {
font-family: Arial; /* Fonte do Menu */
width: 22%; /* Tamanho do Menu */
float: left; /* alinhamento, flutuação do menu */
background: #333333; /* Cor do fundo do Menu */
padding: 3px; /* espaço entre o texto e as margens */
text-align: center; /* alinhamento do texto */
margin: 2px; /* margem */
font-size: 8px; /* Tamanho da fonte */
color: #FFFFFF; /* Cor da fonte */
text-transform: uppercase; /* transformação do texto */
border-radius: 25px 10px / 10px 25px; /* crazy border */
-moz-border-radius: 25px 10px / 10px 25px;
}

cd:hover {
font-family: Tahoma; /* Fonte do menu quando passa o mouse */
background: #000000; /* Cor do fundo do menu quando passa o mouse */
color: #F8F8F8; /* Cor da fonte do menu quando passa o mouse */
border-radius: 10px 25px / 25px 10px; /* crazy border */
-moz-border-radius: 10px 25px / 25px 10px;
}

Mofique o código de acordo com a identificação de cada linha. Não altere os valores da border-radius, pois são esses valores que dão esse efeito legal de bordas diferentes no menu. Depois de fazer as modificações necessárias, salve o modelo.
Agora vamos fazer o menu funcionar! Vá em elementos da página → adicionar um gadget → html/javascript e cole o código abaixo no

novo gadget:

<a href="http://LINK_AQUI"><cd>Nome</cd></a>

Edite o código com o link e nome e salve. Está feito! É muito fácil. :}