Tutorial: Menu Colorido (Horizontal)

Heey . Algodões doces e.e 

Hoje resolvi trazer pra voces um tutorial, para deixar o seu blog mais fofinho com um menu super kawaii colorido ♥ Devido a enquete do blog, vi que voces querem mais tutoriais, layout's free e +18. Em geral voces querem todas as opções na enquete, mais essas são as que mais estão ganhando no momento, então vou começar a postar mais tutoriais, estou providenciando um layout free pra voces e vou tentar criar uma página no blog +18 ou até mesmo fazer um blog, dedicado somente a isso (não sou nem um pouco pervertida, respeitem isso u.ú), mais como voces querem, eu apenas obedeço, huehue *w*

O blog, já chegou a ter uma página dedicada somente a yuri - yaoi - hentai, imagens bem polemicas, huehue, mais só de animes claro u_u em fim, ainda estou vendo e resolvendo, irei demorar, claro ! pois tem crianças que veem o meu blog e acompanham, não posso simplesmente sair botando coisas inapropriadas nele. Queria aproveitar para agradecer a todos que vem acompanhando o meu blog, que apesar de nem sempre estarem comentando, veem as minhas postagens, gostam, votam na enquete, seguem, me mandam mensagens no meu Cbox, me acompanham pelo o facebook no grupo do blog: Grupo dos Otakus/Otomes pra mim isso é incrível e muito bom, mais uma vez muito obrigada.

Estou com várias ideias pro blog, de post's, e até mesmo vídeos, acho que voces vão gostar das novidades que vem por ai, e se você ainda não votou na enquete do blog, por favor, deem uma passadinha aqui no ladinho ~> e votem, pois é muito importante para mim, saber a sua opinião sobre o que está faltando no blog, e o que eu posso fazer para melhora-lo. Agora, chega de enrolação e vamos ao que interessa!

Hoje vou mostrar como usar um menu colorido na horizontal, obtendo o resultado abaixo:

Facebook Twitter Tumblr Google+

Vamos lá!

1. Adicione o código abaixo em seu HTML, antes de ]]></b:skin>: 

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. Onde desejar que o menu apareça, cole o seguinte código:

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

Crédito: Reino Kawaii