Image Map

Tutorial - Menu colors

em 03/03/2015 |

Hello Hello Baby! Tudo bem com vocês? Es estou ótima. Eu sei que a maioria de vocês não conhecem ela, mas hoje é aniversário da Camila Cabello (a menina da ilustração) ela é uma das cantoras da girlband Fifth Harmony, hoje ela esta fazendo 18 anos de puro samba. Eu simplesmente amo a girlband que ela faz parte então acho que ela merece receber os parabéns tanto aqui como no twitter. Como eu já fiz! Mas como o post não é sobre isso vamos ao assunto né? Hoje eu trouxe mais um menu, esse é super fofo e contem duas cores, como ele estava sem nome eu tomei a liberdade de dar o nome de menu colors, já que ele contém duas cores, ele é rosa e laranjado mas fiquem a vontade para trocar as cores ok? Aqui tem um preview para vocês, agora vamos parar com o papo e ir para o tutorial!

1. Vá em modelo >> editar HTML e procure por ]]>< acima disso cole:
.esquerda {
float: left;
width: 46%;
height: 46%;
color: #ffffff;
font: normal normal 12px Helvetica;
text-align: center;
box-shadow: inset 0 0 22px #FF7A8C, 0 0 6px #FF7A8C;
background: #FF7A8C;
padding: 4px;
-webkit-transition-duration: .50s;
}
.direita {
float: right;
width: 46%;
height: 46%;
color: #ffffff;
font: normal normal 12px Helvetica;
text-align: center;
box-shadow: inset 0 0 22px #F0CE90, 0 0 6px #F0CE90;
background: #F0CE90;
padding: 4px;
-webkit-transition-duration: .50s;
}
.meio {
padding: 1px;
margin: 1px;
margin-bottom: -12px;
}
2. Salve, agora crie um gadget de HTML/Javascript e cole o código:
<div class="esquerda">
<a href="LINK_AQUI">Em breve</a></div>
<div class="direita">
<a href="LINK_AQUI">Em breve</a></div>
<div class="meio">&nbsp;</div><div class="esquerda">
<a href="LINK_AQUI">Em breve</a></div>
<div class="direita">
<a href="LINK_AQUI">Em breve</a></div>
<div class="meio">&nbsp;</div>

16 comentários:

  1. Que lindão esse menu ♥
    Favoritei ^3^

    ResponderExcluir
  2. Fica bom demaaais ><
    Ótimo tutorial
    PS: te amo u.u

    ResponderExcluir
  3. que menu liendo ;_;
    Deu até uma vontade de tentar fazer um layout desastroso mas ter o menu -qq

    ResponderExcluir
  4. Você sempre vêm com uns tutoriais ótimos. E parabéns pra Camila, ela é linda.
    http://teoremademari.blogspot.com.br/

    ResponderExcluir
  5. Adorei, muito cute o menu ♡

    ~ MR acabou de reativar || ♡ Mini Realeza ♡ xoxo migs ~

    ResponderExcluir
  6. Eu adoro Fifth Harmony, as músicas delas são um amor e meu Reflection chega amanhã ♥
    Wow que menu lindo *w* adoro coisas coloridas assim, ficou maravilhoso e usarei na primeira oportunidade :3

    Aceitei sua afiliação, seu blog já está na minha elite >3< || Beijos, Thai || Henndrauhl

    ResponderExcluir
    Respostas
    1. Eu ainda não comprei o Reflection mas pedi de aniversário pra minha melhor amiga!
      Que bom que gostou e obrigada por aceitar!

      Excluir
  7. Tb Amo as Meninas <3
    Tuto Maravilhoso,vou usar em um Lay...
    bjs .>3<

    Meninas na Web //oficial

    ResponderExcluir