19/05/2014

Menu Colorido (Horizontal)


Achei esse menuzinho lindo em um dos meus layouts antigos e decidi trazer para vocês, ele é lá do Candylland infelizmente não existe mais... o que é uma grande pena, pós era um ótimo site. Aprendi tantas e tantas coisas lá, não sei o motivo de não existir mais... fiquei muito triste ao entrar tempo atrás e não existir. Mas de toda forma irei creditar, afinal o menu é de lá. O menuzinho é bem simples porém bem fofinho, acho que combina muito com layouts clean de preferência com tons pasteis. Ele é todo coloridinho, mais abaixo deixarei uma amostra do menu. Ele é bem pratico e fácil de se colocar, então vamos, lá? Lets Go!!!

Resultado:

Home Facebook Twitter Tumblr

1. Vá ate seu HTML e adicione o código abaixo, antes de ]]></b:skin>:

Códigos
a.mc {
width: 100px;
height: 100px;
color:#ffffff;
background: #FFD6E3;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc1 {
width: 100px;
height: 100px;
color:#ffffff;
background: #C1E3F2;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc1:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc2 {
width: 100px;
height: 100px;
color:#ffffff;
background: #E3AAD6;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc2:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc3 {
width: 100px;
height: 100px;
color:#ffffff;
background: #E1F5C4;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc3:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}

2. Salve! Agora vá ate Layout  ou onde desejar que o menu apareça, cole o seguinte código:

Códigos
<a class="mc" href="URL-LINK-1">NOME DO LINK</a>
<a class="mc1" href="URL-LINK-2">NOME DO LINK</a>
<a class="mc2" href="URL-LINK-3">NOME DO LINK</a>
<a class="mc3" href="URL-LINK-4">NOME DO LINK</a>

XoXo~

12 comentários:

  1. que menu fofo e lindo ^^ ♥
    kissus You Like?

    ResponderExcluir
  2. Eu também amava esse blog D; o menu é lindo.
    http://euamotutoriais.blogspot.com.br/?m=1

    ResponderExcluir
  3. Esse menu é lindo *3* Usarei no meu novo layout *33333333*

    Aceita afiliação amore?

    html-always.blogspot.com.br || Html Always ♥

    ResponderExcluir
  4. Wooowww que fofo... eu amei é para aqueles lay bem cutezinho estilo unicórnios kkkkk'

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
  5. Anônimo21/5/14

    Lindo, dá certinho com layouts mais coloridos!

    Kisses.
    morango-com-nutella.blogspot.com

    ResponderExcluir
  6. Uma pena , mal tive chances de conhecer q
    O menu é lindo mesmo 0/

    www.g-girlie.net / estamos de volta ! <3

    ResponderExcluir
  7. Anônimo21/5/14

    Até no final do ano passado, esse site era uma loja, agora fiquei sabendo por aqui que ele fechou ;(
    Adorei o menuzinho!
    www.swe-etspace.blogspot.com.br

    ResponderExcluir
  8. Ai, amei o menu, estou pensando em usar nos meus próximos lays <3
    Além do mais que é fácilzinho de colocar, só dá preguiça uhasuhashuhas .q
    Bjs da Mih,
    garotasdohtml.blogspot.com

    ResponderExcluir
  9. Acho que eu já tinha ouvido falar desse blog. Eu acho que já conhecia, mas no tempo que eu era blogueira, só que eu nem tinha noção de HTML, que pena T^T Blogs assim estão faltando.
    Que menu lindo *OO* Sério ele está bem fofinho, assim que eu gosto tia Mendy q

    Querendo-voar.blogspot.com ~

    ResponderExcluir
  10. Não tive a oportunidade de conhecer o Candllandy,infelizmente. A propósito, o menu é super fofo, talvez eu use no meu próximo layout. Beijos e abraços.
    http://rougecrazy.blogspot.com.br

    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