Tutorial: menu blueberry

Hello cutes! Tudo bem? Já faz um bom tempo que eu não posto um tutorial, né? Mas hoje eu vou ensinar como fazer o menu blueberry. Créditos ao Miki Candy. O menu é bem fofo! Vamos ver? Clique aqui para ver o print.

participe do super concurso que está rolando aqui no CT, valendo um layout + entrevista + divulgação por 1 mês! Tá esperando o que? Clique aqui e participe :) 

Vá em modelo  clique em editar HTML  procure por:

]]></b:skin>

Achou? Então cole o seguinte código abaixo da tag destacada, fazendo as alterações que você achar necessário, okay?

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

Agora iremos aplicar o menu no blog. Para isso vá em:

layout   adicionar um gadget  HTML/Javascript

<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>

Prontinho, o menu está aplicado! Agora é só você fazer as alterações necessárias e salvar! Espero que tenham gostado e utilizem!