Menu Redondo Tombou

Olá Bubbles! Olha eu aqui de volta, quero dizer mais uma publicação agendada ^^  Nesta trago-vos mais um tutorial, mas desta vez é de um menu criado por mim, deu-me na cabeça que queria experimentar a criar alguma coisa, e saiu isto, um menu redondo que tomba, por isso o nome, sei não tenho muito jeito para criar nomes, eu sei disso T-T, mas isso não importa muito não é, ao menos o menu não é tão mal quando o seu nome ^^
Mas então podes ver a preview do menu aqui, e se estiveres interessado continuar a ler o post...

Então para colocares o menu só tens de ir ao Modelo > Editar HTML > Clicar em Ctrl+f e procurar por ]]></b:skin> e acima disso, colar o código de baixo...

/* Menu do Just Bubbles Days (justbubbledays.blogspot.com) */
menuredondo {
float:center; /*alinhamento*/
margin: 0px 0 -6px -1px; /*margens não alteres*/
cursor:help; /*tipo de cursor ao passar por cima*/
width: 20px; /*tamanho em largura que ocupa*/
height: 20px; /*tamanho em altura que ocupa*/
line-height:9px; /* espaço entre linhas*/
display: inline-block; /* texto com parárgrafo*/
background: #B0E0E6; /* cor do fundo */
text-align:center; /* alinhamento do texto */
color: #fff; /* cor do texto */
font-size: 10px; /* tamanho da fonte */
font-family: arial; /* tipo de letra */
text-transform: uppercase; /*  */
padding: 3px; /* espaçamento interior */
margin-bottom: 2px; /*margem inferior*/
vertica-align: text-center;
border-radius: 12px; /* bordas arredondadas ao passar com o rato se não quizer coloque apague*/
transition-property: border; transition-duration: .9s; /* efeito de transição ao passar com o rato*/
border-filter: alpha(opacity=80); opacity: .80; /* efeito de opacidade ao passar com o rato*/
box-shadow: 1px 1px 1px #DCDCDC;
font-weight: lighter; /*efeito no texto*/
}
menuredondo:hover {
color: #B0E0E6; /* cor do texto ao passar com o rato */
background: #f5f5f5; /* cor do fundo ao passar com o rato */
border-radius: 10px; /* bordas arredondadas ao passar com o rato se não quizer coloque apague*/
transition-property: border; transition-duration: .9s; /* efeito de transição ao passar com o rato*/
border-filter: alpha(opacity=80); opacity: .80; /* efeito de opacidade ao passar com o rato*/
transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); /*efeito rotação*/
}

Depois é só colares o código abaixo aonde queres que apareça o menu, e alterares o link e o texto, caso queiras mais é só colares novamente o código, aconselho a deixar um espaço entre um e outro.

<a href="Link"><menuredondo>texto</menuredondo></a>

É só isso, sei que o código é grande mas é porque eu tentei explicar à frente o que era cada coisa, caso tenhas tido alguma dificuldade, (para além da de ler esta frase, por causa da imagem enorme em baixo estar a piscar, não resisti em colocá-la ^^), é só deixares um comentário, bye!