Menu horizontal simples para o blogger

Clique para visualizar em nova janela

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:
Dicas Blogger:
Compartilhar:
← Anterior Proxima → Inicio

Seguidores

Total de visualizações

Mario Quintana

O TRÁGICO DILEMA: Quando alguém pergunta a um autor o que este quis dizer, é porque um dos dois é burro.

AMAR: Fechei os olhos para não te ver e a minha boca para não dizer... E dos meus olhos fechados desceram lágrimas que não enxuguei, e da minha boca fechada nasceram sussurros e palavras mudas que te dediquei... O amor é quando a gente mora um no outro.

BILHETE: Se tu me amas, ama-me baixinho Não o grites de cima dos telhados Deixa em paz os passarinhos Deixa em paz a mim! Se me queres, enfim, tem de ser bem devagarinho, Amada, que a vida é breve, e o amor mais breve ainda...

Por Mario Quintana

Veja outros autores em: Pensador.Info

VEM DO CORAÇÃO

Há um sentimento para contemplar, como encontrar palavras que expressa o sentimento continuo e duradouro, somente os gestos, olhares, carinhos e até mesmo o silêncio poderá explicar o que sinto, para quem corresponde será um bom entendedor.

Márcio Ferreira

Tecnologia do Blogger.

email newsletter

Link-me


Divulgue o By Poesia
function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } }