Photobucket

10 de jan. de 2008

LINKS E FUNÇÕES MENU (II)

Já sabe como colocar o menu no blog? Então é hora de aprender a personalizá-lo. Vamos primeiro com os links, ok? É bem simples. Vamos lá!

Encontre esse trecho no blog:

<div id='menu'>
<ul><li><a href='ENDEREÇO DO SEU BLOG AQUI'><span>’HOME’</span></a></li>
<li><a href='AQUI COLOQUE A URL'><span>’O QUE VAI APARECER’</span></a></li>
</ul>
</div>

Essa parte em negrito é cada um dos itens, sempre que quiser adicionar um é só copiar essa arte e colar antes de </ul>. A ordem que aparecerá no seu blog é a que estiver nesse código, então se quiser que fica entre um e outro é só colar lá. Ex: Se eu quero por um link entre a Home o negrito eu tenho que colar entre um e outro, mas cuidado quando forem fazer isso, gente!

ATENÇÃO: Não tire os apóstrofos (‘) e cuidado com as tags (<li> <a> etc), se alguma sair do lugar, ou for apagada o código não funcionará!

Acho que ficou confuso, qualquer dúvida só dizer! E sobre links é isso, vamos para as funções do menu agora, ok?

-------------------------------------------------

/* Menu
-----------------------------------------------
*/
#menu {
float:left;
width:100%;
background:$bgcolor;
font-size:93%;
line-height:normal;
border-bottom:1px solid $bgcolor;
margin: 0 0 0 0;
}

#menu ul {
margin:0;
padding:10px 10px 0
50px;
list-style:none;
}
#menu li
{
display:inline;
margin:0;
padding:0;
}

#menu a {
float:left;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menufino-1.jpg) no-repeat left top;
margin:0;
padding:0 0 0
4px;
text-decoration:none;
}
#menu a span
{
float:left;
display:block;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menu-1.jpg) no-repeat right top;
padding:5px 15px 4px
6px;
color:#FFFFFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac
\*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {
color:#000000;}
#menu a:hover {background-position:0% -42px;}
#menu
a:hover span {background-position:100% -42px;}




O que está em cinza é melhor não mexer, ok?

O que está em vermelho é modificável:

background:$bgcolor; esse é o fundo do menu, atrás das imagens. Ai está com o fundo da sua página (background color), mas você pode por preto (#000000), ou uma cor a sua escolha. Pode ainda simplesmente tirar esse código, assim não terá fundo, será transparente.

border-bottom:1px solid #FFFFFF; essa é a borda do menu. Está só embaixo e preto, você pode por borda inteira (border), mudar a largura da borda, e a cor. Pode também deixar sem borda, colocando zero na largura, ou deletando essa linha.

float:left; essa é a "flutuação" do menu. Se você por 'right' ele ficará direita para esquerda. Não recomendo que ponha center, mas pode por para ver o que acontece!

background: url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menufino-1.jpg) no-repeat left top; aqui é onde você deve por a imagem. No primeiro desse, ponha a imagem mais fina, no segundo a imagem maior. Você pode tirar a imagem se preferir, e deixar apenas uma é só substituir por "#número da cor escolhida" o que está em vermelho.

color:#FFFFFF; aqui é a cor da fonte do seu menu quando não está selecionado. Ponha a de sua preferência.

#menu a:hover span {color:#000000;} aqui é a cor da fonte com o mouse em cima do menu, ponha a cor de sua escolha.

O que está em azul não tem no código, mas você pode adicionar se quiser ajustar melhor o menu: jogar um pouco para direita, aumentar o espaço para baixo ou para cima, e coisas assim. Para modificar adicione o código no lugar indicado e vá modificando, lembrando que os números estão no sentido horário, ou seja:

margin: 1px (topo) 1px (direita) 1px (abaixo) 1px (esquerda);

Você pode colocar qualquer número ou ainda -1px. Entenderam?

Agora acho que é isso, mais uma vez não sei se me fiz me entender. Sintam-se a vontade para perguntar! (Ou reclamar, sei lá...rs)

5 Comments:

Anônimo said...

Oi!

Muito legal essa sua explicação, procurei numa porção de lugares, achei, mas só o seu consegui instalar.
Parabéns, leva jeito pra ensinar!

Abraço,
Ju

. said...

Não entendi uma coisa.
Como eu coloco esse link? =\
Tipo como eu coloco "arquivos" na opção "download".
Desculpa qualquer coisa .
É que não entende essa parte.
Tenho que fazer marcadores para isso ?

Leandro said...

olá eu tbm só consegui intalar atravez do seu blog.
Mas como trocar há fonte
Manda há resposta para o meu email leandrinhosantos_100@hotmail.com

Eu said...

Oi Rô, estou travando uma luta com os links que não ligam. Vc talvez pudesse me dar uma força.Se der, vlw.

MATHEUS said...

ONDE COLOCO O CODIGO?
QUERO DIZER EM QUE PARTE DO HTML?