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>E substitua por seus links e palavras. Pronto. Fica fofo não é?
<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>
***Uma dica para os códigos de cores é vc usar o Design do Modelo do Blogger (Design, Design do Modelo)***
beijinhus :3
acho q vou usa-lo, obg mt bom seu blogger *-*
ResponderExcluir