Tutorial: Menu ''BlueBerry''

Créditos: MC

Hoy, guitarras coloridas!

Bem, eu tava pensando em trazer um menu cute, para vocês e procurei em um blog que eu adoro o MC, o nome ér Blueberry, fica bem fofinho é um efeito bem delicado, é já usado em muitos blogs. Em normal o menu é redondinho mais quando passa o mouse ele toma forma e fica quadradinho com as bordas redondinhas, e com uma linha pontilhada em volta. Exemplo:

~ Lets Flowers? ~ 

1. Vá em Editar HTML é procure por:

]]></b:skin>

2. Achou? Agora cole o seguinte código abaixo desse código, fazendo as alterações:

/* Menu Blueberry by Miki Candy */
blueberry{
color: #fff; /* cor da fonte quando passa o mouse */
text-align:center;
font-size: 11px; /* Tamanho da fonte do menu */
background: #3FCFAD ; /* Fundo do menu */
padding: 2px;
float: left;
margin: 2px;
cursor: crosshair; /*cursor */
width: 45%; /* tamanho do menu */
-webkit-transition-duration: .80s;
border:1px dotted #D682DE; /* bordas */
border-radius: 10px; /*---- bordas arredondadas ----*/
}
blueberry:hover{
background:#D682DE; /* fundo do menu quando passa o mouse */
border:1px solid #3FCFAD; /* bordas quando passa o mouse */
color: #fff; /* cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
border-radius: 5px; /*---- bordas arredondadas ----*/
}

3. Agora para usar o menu basta, adicionar em um gadget HTML/Javascript o código:

 <div><a href="URL 1"><blueberry>NOME 1</blueberry></a>
<a href=" URL 2 "><blueberry>NOME 2</blueberry></a>
<a href=" URL 3 "><blueberry>NOME 3</blueberry></a>
<a href=" URL 4"><blueberry>NOME 4</blueberry></a></div>

Acho que o resto vocês sabem néah?

Fonte.