Meu Primeiro Menu!

Oiii pessoal eu venho com uma boa notícia e com uma má. A boa é que eu fiz um menu!!!Estou feliz, é o primeiro menu que eu faço ^^. O nome dele é Rolling Dots, que em inglês significa bolinhas(ou pontos) rolantes. Prefiro Pontos Rolantes.Eu fiz dois modelos!!

A má notícia é que estou pensando em sair da dupla Fulanhin... :(

Vamos fixar o tema no menu, como já fala o título, notícias tristes serão abandonadas na linha de cima. Veja ele abaixo:

O pontilhado se move (rola) ^^

Talvez ele lembre algum menu que vocês conhecem, então vou falar de onde eu tirei um trechinho do meu código: menu bad reputation, que é a parte arredondada do meu menu (mas é claro, eu editei).
O código (mude somente o que está colorido - ou não, para que o menu fique igual ao meu) :
<< demonstração míni do outro modelo.
Leia mais para ver o código do modelo verdinho e do modelo vermelho acima.


/* Menu Rolling Dots - by julieta */
dots{text-align:center;font-size: 10px; /* Tamanho da fonte do menu */
background: url("http://bglabs.evade.netdna-cdn.com/45875kli90/185.jpg"); /* Fundo do menu */
padding: 2px;
float: left;
margin: 2px;
cursor: normal; /* cursor quando passa o mouse */
width: 30%; -
webkit-transition-duration: .80s;
border:2px dotted #99EB87; /* bordas - só altere o colorido */
color: #85D8E7; /* cor da fonte */
letter-spacing: 3px; /* espaço das letras */
-moz-border-radius: 60px 35px / 35px 60px;
border-radius: 60px 35px / 35px 60px;
}
dots:hover{font-size: 10px; /* Tamanho da fonte do menu quando passa o mouse */
background: url("http://bglabs.evade.netdna-cdn.com/45875kli90/182.jpg"); /* fundo do menu quando passa o mouse */
border:2px dotted #20D2E9; /* bordas quando passa o mouse */
color: #5ED446; /* cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
letter-spacing: 1px; /* espaço das letras quando passa o mouse */
-moz-border-radius: 40px 60px / 60px 40px;
border-radius: 40px 60px / 60px 40px;}

Não se esqueça: cole o código do menu acima de ]]></b:skin
Cole o seguinte código como HMTL/Java Script, para inserir o menu no blog (multiplique o código quantas vezes precisar!) :

<a href=" URL DA PAGINA"><dots> NOME DA PAGINA</dots></a>

CREDITE SE USAR OU MENCIONAR: FEITO POR JULIETA.
Abaixo, outro modelo esclusivo, mas do mesmo menu! E mais: você pode usar os dois no mesmo modelo! Observe ele abaixo:

Cole abaixo de ]]></b:skin


/* Menu Rolling Dots - by julieta */
dots2{
text-align:center;
font-size: 13px; /* Tamanho da fonte do menu */
background: url("http://bglabs.evade.netdna-cdn.com/45875kli90/524.png"); /* Fundo do menu */
padding: 2px;
float: left;
margin: 2px;
cursor: normal; /* cursor quando passa o mouse */
width: 30%;
-webkit-transition-duration: .80s;
border:2px dotted #F75F4E; /* bordas - só altere o colorido */
color: #F75F4E; /* cor da fonte */
letter-spacing: 1px; /* espaço das letras */
float: left;
-moz-border-radius: 60px 35px / 35px 60px;
border-radius: 60px 35px / 35px 60px;
}
dots2:hover{
font-size: 14px; /* Tamanho da fonte do menu quando passa o mouse */
background: url("http://bglabs.evade.netdna-cdn.com/45875kli90/326.gif"); /* fundo do menu quando passa o mouse */
border:1px dotted #F8EFEE; /* bordas quando passa o mouse */
color: #F8EFEE; /* cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
letter-spacing: 2px; /* espaço das letras quando passa o mouse */
-moz-border-radius: 40px 60px / 60px 40px;
border-radius: 40px 60px / 60px 40px;
}Aqui, o código que você vai por no widget(multiplique o quanto precisar):

<a href=" URL DA PAGINA"><dots2> NOME DA PAGINA</dots2></a>

 É isso, pessoinhas!! Qual vocês gostaram mais? O primeiro modelo ou o segundo?
CREDITE SE USAR OU MENCIONAR: FEITO POR JULIETA.
Abraços!!!!