Menu cupcake Harry Styles

março 09, 2013,11 Comments

Bom galera, hoje eu vou ensinar a fazer um menu, ele é fácinho e bem bonito, ele é tão lindo que fica bonito em qualquer blog e dá uma organizada legal no seu blog. O nome do menu é Cupcake e automaticamente pra quem é Directioner lembra do Harry Styles... e o menu é tão fofo e lindo quanto ele. O menu que eu tô falando é esse:

Bonito né? Quer aprender a fazer ele? Então clica em "Leia mais" ai vai.

Como eu disse o menu é fácil.. pra quem sabe mexer em HTML não demora nem cinco minutos. Enfim vamos lá. 1º Passo: Vá em Modelo → Editar HTML → e procure por

]]><b:skin>

ao encontrar essa tag, acima dela você cola o código a seguir:

/* --- MENU CUPCAKE --- */
cupcake {
width: 27%; /* largura do menu */
margin: 3px; /* margem entre os links, não altere */
padding: 3px; /* espaço entre os links e a margem, não altere */
float: left; /* alinhamento do menu, não altere */
background:#000000; /* cor de fundo */
color:#FFF; /* cor do link */
font-family: Arial; /* tipo da fonte */
font-size: 9px; /* tamanho da fonte */
text-align: center; /* alinhamento centralizado do link */
text-transform: uppercase; /* transformação do texto */
border-radius:5px; /* borda arredondada */
-webkit-transition-duration: .90s; /* tempo de transição, não altere */
}

cupcake:hover {
background:#EEEEEE; /* cor do menu em hover */
color: #333333; /* cor do link em hover */
border-radius:10px; /* borda arredonda em hover */
}

Não precisa explicar muita coisa né? Porque já tem as explicações necessárias do lado... e pra quem precisa mudar as cores aqui tem a tabela (www) Depois de tudo modificado e só salvar!

2º Passo: Vá em Layout → Adicionar gadget → HTML/JAVASCRIPT

E cole o código abaixo mudando o que se pede.