Menu horizontal simples para o blogger

Depois de muito quebrar a cabeça elaborei um menu horizontal bem básico, decidi fazer depois de muito estudar sobre códigos e achar essencial em um blog ter o menu seja ele horizontal ou não, mas aqui vou falar sobre menu horizontal deixando a quem se interessar fazer seu estilo a gosto. No final do post colocarei alguns links de menus interessantes.

Começando a criar seu menu, vá em Editar HTML e cole o seguinte código:

<div id='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contato</a></li>
<li><a href='#'>Parceria</a></li>
<li><a href='#'>Sobre</a></li>
<li><a href='#'>Serviços</a></li>
</ul>
</div>

Se quiser que o menu apareça abaixo do cabeçalho procure o seguinte código (use “Ctrl + F” para localizar mais rápido):

<div id='content-wrapper'>

Cole o código do menu imediatamente abaixo dele ficando assim:

<div id='content-wrapper'>
<div id='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contato</a></li>
<li><a href='#'>Parceria</a></li>
<li><a href='#'>Sobre</a></li>
<li><a href='#'>Serviços</a></li>
</ul>
</div>

Agora vamos para o estilo “CSS” do menu; vá em Editar HTML e cole no código do seu template, acima de ]]></b:skin> o seguinte  cóndigo:

/* Menu
----------------------------------------------- */
#menu ul {
padding:0;
margin:0;
float: left;
width: 100%;
background:#d4f7fb url(http://dl.dropbox.com/u/3251824/menudegrade3.jpg) repeat-x;
list-style:none;
border-top:1px solid #1E90FF;
border-bottom:1px solid #1E90FF;
}

#menu ul li a {
margin:0;
padding:7px;
float:left;
background-color:transparent;
text-decoration: none;
color:#000080;
font-weight:bold;
font:small-caps bold 12px Arial;
text-transform:uppercase;
border-left:1px solid transparent;
border-right:1px solid transparent;
}

#menu ul li a:hover {
color: #000;
left: 1px;
position: relative;
top: 1px;
}

Nota que o width: é a largura total do menu vai configurando até que se encaixe nas configurações do seu Template e isso garante que o menu flutue na horizontal assim como o float: left; também vai alterando os valores de margin e padding para que melhor se encaixe ao seu Template. A imagem em background tanto você pode colocar somente cor ou fazer uma imagem a seu estilo hospedando em seu site de costume pegando a URL e substituindo a que está no código CSS original especificado em “negrito”, eu usei as configurações para altura de 30px e largura de 10px e um degrade de azul para azul claro na imagem. Substitua os # pelo link que desejar.

Links de sites que postaram tutoriais de menus horizontais interessantes

Templates para novo blogger:

• Menu Horizontal com CSS e Jquery

• Criando um menu horizontal no blog

• Como colocar links no menu

• Mais menus horizontais 

Dicas Blogger:

• Linkbar-Menu Horizontal