Menu de Gotinha

Tumblr_lx4moh3px81r52kfeo1_500_large

   Hi pessoal, aqui ensinarei á vocês á como colocar menu de gotinhas que também tem até efeito hover (ao passar do mouse) no seu blog.. é muito simples, rápido, fácil, e sem demora.. vamos começar.
  Entre em Design  Editar HTML  Ctrl + F  ]]>
Achou, né?! Basta colar este código acima:
 /*-Início Menu de Gotinha */mdg {
font-family: verdana; /* fonte do menu */
width: 20%; /* largura */
float: left; /* posicionamento do menu */
background: #000000; /* cor de fundo */
padding: 3px; /* altura */
text-align: center; /* posicionamento do texto */
margin: 2px; /* espaço */
-webkit-border-radius: 15px 15px 15px 0px; /* bordas */
-webkit-transition-duration: .90s; /* duração do efeito */
font-size: 08pt; /* tamanho da fonte */
color: #ffffff; /* cor da fonte */
letter-spacing: 0px; /* espaço das letras */
}
mdg:hover {
font-family: verdana; /* fonte do menu hover */
width: 20%; /* largura hover */
float: left; /* posicionamento do menu hover */
background: #e5e5e5; /* cor de fundo hover */
padding: 3px; /* altura hover */
text-align: center; /* posicionamento do texto hover */
margin: 2px; /* espaço hover */
-webkit-border-radius: 15px 15px 15px 0px; /* bordas hover */
-webkit-transition-duration: .90s; /* duração do efeito hover */
font-size: 08pt; /* tamanho da fonte hover */
color: #000000; /* cor da fonte hover */
letter-spacing: 3px; /* espaço das letras hover */
}
/*-Fim Menu de Gotinha */
 Logo após de ter feito tudo isto, entre em Layout  Adicionar Gadget  HTML/Javascript, e cole o outro código logo abaixo:

NOMEDOLINK
 Observações:
- No próprio código está indicando cada item..
- Créditos: On the Fame
- Espero que eu tenha ajudado com este tutorial.. até a próxima!



Nenhum comentário

Postar um comentário

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo