Menu horizontal
Para colocar um menu horizontal no site precisamos colocar o código em duas partes distintas. Primeiro vamos colocar o CSS, no blogspot isso é feito através da pagina editar html, colocando o código abaixo junto com os demais códigos CSS do seu blog (body, main, sidebar, etc...), basta colocar o trecho abaixo junto com o restante dos códigos. Para outros blogs a regra é a mesma junto com os demais estilos CSS.
Código CSS do menu horizontal:
#menu{padding: 0px;
font: bold 12px Verdana;
margin: 0px;
width: 650px;}
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{
color: #0000FF;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
width: 150px;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
}
#menu li a:hover{
color: #FFFFFF;
background-color: #FF9933;
border: 2px solid #0099FF;
}
Aqui existem algumas coisas que podemos mudar para deixar esse menu com uma aparência melhor para nosso site. Começando pela largura de cada item, isso é alterado nessa parte: width: 150px; basta trocar esse valor e pronto, contudo modificando isto mudaremos também a largura total do menu que precisará ser corrigida aqui: width: 650px. Quando colocar isso no seu site os itens do menu devem ficar um do lado do lado se isso não ocorrer modifique um destes dois valores que resolverá o problema.
Nesse exemplo o menu não está todo junto existe um pequeno espaço entre os itens para remover ou aumentar esse espaço altere o 3 nesta parte: margin-right: 3px. Finalmente as bordas:
border: 2px solid #000000;
border: 2px solid #0099FF;
Você pode mudar a largura ou a cor da borda (clique aqui e veja o código das cores), ou se preferir sem bordas basta apagar essas duas linhas.
Agora vamos para a segunda parte colocar o menu propriamente dito. Na página editar layout clique para adicionar um gadget e escolha a opção html/javascript, então coloque o código do menu, fizemos esse exemplo com nossos sites, mas para alterar é somente trocar os links:
<ul id="menu">
<li><a href="http://jornaljd.blogspot.com" target="_blank">Meu Jornal</a></li>
<li><a href="http://frasecurta.blogspot.com" target="_blank">Frases Curtas</a></li>
<li><a href="http://mensagens.110mb.com" target="_blank">Frases e Mensagens</a></li>
<li><a href="http://cidadeweb.110mb.com" target="_blank">Cidade Web</a></li>
</ul>
Caso tenha dificuldades com este código publicamos um outro artigo sobre menu horizontal mas lá mostramos como colocar o código num lugar só, sem entrar na pagina editar html.
Veja também:
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
Código CSS do menu horizontal:
#menu{padding: 0px;
font: bold 12px Verdana;
margin: 0px;
width: 650px;}
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{
color: #0000FF;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
width: 150px;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
}
#menu li a:hover{
color: #FFFFFF;
background-color: #FF9933;
border: 2px solid #0099FF;
}
Aqui existem algumas coisas que podemos mudar para deixar esse menu com uma aparência melhor para nosso site. Começando pela largura de cada item, isso é alterado nessa parte: width: 150px; basta trocar esse valor e pronto, contudo modificando isto mudaremos também a largura total do menu que precisará ser corrigida aqui: width: 650px. Quando colocar isso no seu site os itens do menu devem ficar um do lado do lado se isso não ocorrer modifique um destes dois valores que resolverá o problema.
Nesse exemplo o menu não está todo junto existe um pequeno espaço entre os itens para remover ou aumentar esse espaço altere o 3 nesta parte: margin-right: 3px. Finalmente as bordas:
border: 2px solid #000000;
border: 2px solid #0099FF;
Você pode mudar a largura ou a cor da borda (clique aqui e veja o código das cores), ou se preferir sem bordas basta apagar essas duas linhas.
Agora vamos para a segunda parte colocar o menu propriamente dito. Na página editar layout clique para adicionar um gadget e escolha a opção html/javascript, então coloque o código do menu, fizemos esse exemplo com nossos sites, mas para alterar é somente trocar os links:
<ul id="menu">
<li><a href="http://jornaljd.blogspot.com" target="_blank">Meu Jornal</a></li>
<li><a href="http://frasecurta.blogspot.com" target="_blank">Frases Curtas</a></li>
<li><a href="http://mensagens.110mb.com" target="_blank">Frases e Mensagens</a></li>
<li><a href="http://cidadeweb.110mb.com" target="_blank">Cidade Web</a></li>
</ul>
Caso tenha dificuldades com este código publicamos um outro artigo sobre menu horizontal mas lá mostramos como colocar o código num lugar só, sem entrar na pagina editar html.
Veja também:
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
Marcadores: Códigos, CSS, Template