TEMPLATES E MAIS

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 elemento de pagina 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>