In Tutoriais

Tutorial: Menu Colorido + Prêmio :3

Oie ^-^
Estou muito feliz porque ganhei esse selinho fofo de dois blogs fofos e que gosto muito e super recomendo, o Kitty's Place e  o MiRinconOtaku!!! Obrigada!!


Bem, vamos ao post de hoje...
Sabe esse menu colorido que uso? Encontrei o código no site da Danny Kitty e gostei bastante por ser bem fácil, super personalizável e bem fofo!

Ele é assim: (salve o html do seu blog antes)
Primeiro vá em Design, Editar HTML e cole esse código entre as tags <head> e </head>:

/***************** MENU NAVI *****************/
#nav{
color:#A8DEE7;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#E3FBFF;
border-top:1px solid #E3FBFF;
border-left:1px solid #E3FBFF;
border-right:1px solid #E3FBFF;
border-bottom:1px solid #E3FBFF;
padding:0px;}

#nav:hover{
color:#FFBADD;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#FFEFF7;
border-top:1px solid #FFEFF7;
border-left:1px solid #FFEFF7;
border-right:1px solid #FFEFF7;
border-bottom:1px solid #FFEFF7;
padding:0px;}
#nav2{
color:#88E2A6;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#E7FFF1;
border-top:1px solid #E7FFF1;
border-left:1px solid #E7FFF1;
border-right:1px solid #E7FFF1;
border-bottom:1px solid #E7FFF1;
padding:0px;}
#nav2:hover{
color:#FFBADD;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#FFEFF7;
border-top:1px solid #FFEFF7;
border-left:1px solid #FFEFF7;
border-right:1px solid #FFEFF7;
border-bottom:1px solid #FFEFF7;
padding:0px;}

Vamos entender algumas partes importantes do código:
*#nav{ e #nav:hover{ se referem ao link; se quiser adicionar outro link deverá sempre colocar um número que irá se referir ao link, link2, link3 e assim por diante;
*color se refere a cor da fonte;
*font-family = tipo de fonte;
*font-size = tamanho da fonte;
*background-color = cor de fundo de cada link
Outras partes se referem a bordas, margens...como vcs devem ter percebido neh; é só editar cada um dos códigos para cada link.
Feito isso, agora salve o modelo, vá em Design, Adicionar gadget, HTML/JavaScript e cole isso no local em que vc quer que o menu apareça:
<div id="nav"><a title="descreva o link e a descrição aparece quando passa o mouse" href="URL DO SEU LINK">NOME DO SEU LINK</a> – e aqui vc escreve alguma coisa mais</div>
<div id="nav2"><a title="descreva o link 2 e a descrição aparece quando passa o mouse" href="URL DO LINK 2">NOME DO LINK 2</a> – e aqui vc escreve alguma coisa mais</div>
E substitua por seus links e palavras. Pronto. Fica fofo não é?
***Uma dica para os códigos de cores é vc usar o Design do Modelo do Blogger (Design, Design do Modelo)***
beijinhus :3

Related Articles

1 comentários:

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart