10/12/2012

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.


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

6 comentários:

  1. obrigado pela parceria, acabei de adicionar o gadget de seguidores no blog.

    ResponderExcluir
    Respostas
    1. Hihi eu que agradeço, já estou seguindo

      Excluir
  2. Olá adorei o blog, segue o meu eu sigo de volta:
    http://www.sayinpassing.blogspot.com/

    ResponderExcluir
  3. Também acho legal esse menu, fiz um post sobre ele.. Depois que inventaram o tumblr, a nossa vida no blogsfera ficou muito melhor neh? HUAHUHAUHAUHA
    Beijos lindaa;

    ResponderExcluir
  4. Verdade depois da chegada do Tumblr a blogsfera melhoro muitooooo rsrsrs obrigada pela visitinha.

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345