Menu Redondo Hover (Colorido)

Hayooo meus bunnys como vão vocês? Trago hoje um menuzinho que usei no meu theme ice cream. Ele é um menu do tumblr que se chama love of designs, que modifiquei um tantinho para pôr aqui no blogger. Eu o acho muito kawaii, muito simpley e perfeito! Ele perfeito para aqueles que não gostam de um menu muito miram bulantes. Caso queiram dar uma olhadinha clique no botão mais a baixo.

Brevia do efeito

1. Agora vá ate seu HTML e procure por ]]></b:skin>, assim que o achar coloque o próximo código a cima dele:

Códigos

/*--------------Menu---------*/

.mennu {font-size: 10px; font-family: arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#E0FFFF;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu:hover {color: #fff;background: #e0b7c3;}

.mennu1 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#FFC0CB;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu1:hover {color: #fff;background: #ddf4b4;}

.mennu2 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#B4EEB4;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu2:hover {color: #fff;background: #cbe0f3;}

.mennu3 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#EEE685;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu3:hover {color: #fff;background: #e9c196;}

.mennu4 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#EED2EE;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu4:hover {color: #fff;background: #FFF68F;}

.mennu5 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#CAFF70;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu5:hover {color: #fff;background: #c9d8ee;}

.mennu6 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#FF69B4;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu6:hover {color: #fff;background: #C1FFC1;}

.mennu7 {font-size: 10px; font-family:arial; color: #777;float:left;padding: 8px; paddign:5px; text-align:center; margin: 0px 0 -6px -1px;background:#00FF7F;width:16px; border-radius: 0px; cursor:help;-webkit-transition-duration: .50s; border:1px solid #fff;border-radius:70px;}

.mennu7:hover {color: #fff;background: #FF3E96;}

2. Salve! E vá para Layout, lá você adicione um novo gadget html java scrip, e dentro dele coloque este codigo:

Códigos

    <a href="/" class="mennu"> <div >01</div></a>

    <a href="/" class="mennu1"> <div >02</div></a>

    <a href="/" class="mennu2"> <div >03</div></a>

    <a href="/" class="mennu4"> <div >04</div></a>

    <a href="/" class="mennu5"> <div >05</div></a>

    <a href="/" class="mennu6"> <div >06</div></a>

    <a href="/" class="mennu7"> <div >07</div></a>

Agora basta personalizar com as cores, que quiser!!!