Menu Horizontal com Linha Mágica [jQuery e CSS]

Templates exclusivos e profissionais, instalação de hacks e domínios e utilização técnicas de SEO. Conheça o ProBlogs, onde fazemos tudo isso a preços relativamente baixos!

Caro leitor do Rascunhos Blogger,
Ao navegar numa página do site CSS-Tricks encontrei um tutorial, onde nos era ensinado a adicionar um menu de navegação (horizontal), que parecia ser criado em Flash, mas no entanto, a sua génese era à base de CSS e jQuery.
Quem estiver interessado a ver este menu em acção pode deslocar-se ao nosso Laboratório, mas também deixarei, abaixo, uma pequena imagem do menu:

O mais importante é que o criador do dito menu, Chris Coyier disse que nos podíamos sentir à vontade para fazer o que queríamos com ele. E hoje, arranjei um tempinho livre para modificar aqui e ali no código para que funcione perfeitamente num blog do Blogger, já que o código CSS do menu alterava a cor de fundo do blog e situava o menu a 50 px abaixo do cabeçalho e com esta pequena modificação ficou perfeito!
Para adicioná-lo ao seu blog, primeiramente tem que adicionar a versão 1.3.2 do jQuery. Para isso entre no Blogger, dirija-se à aba Design e de seguida à sub-aba Editar HTML.
Procure pela tag abaixo:

</head>

Acima desta tag, cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/rascunhosblogger/host/Script.menu.MagicLine.1.js' type='text/javascript'/>

Se já possui a versão 1.3.2 do jQuery no seu blog, não volte a adicioná-lo, apenas copie a parte do código acima que está a vermelho. Caso não tenha a versão 1.3.2 do jQuery copie o código todo.
Agora vamos adicionar o código CSS, que dará estilo ao menu, para isso, procure pela tag abaixo:

]]></b:skin>

Antes dessa tag adicione o código CSS abaixo:

/* CSS Menu Horizontal Linha Magica */
* { margin: 0; padding: 0; }
.nav-wrap { margin: 0px auto; background-color: #000000; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: #ffffff; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

Para alterar a cor de fundo do menu horizontal, basta substituir a parte do código background-color: #000000; que se encontra destacado a azul. Escolha uma cor utilizando uma tabela de cores adequada.
Para alterar a grossura e a cor das bordas, substitua a parte do código que se encontra destacada a verde. 2px define a grossura e #ffffff define a cor, que neste caso é branca. Escolha uma cor utilizando esta tabela.
Se quiser alterar a cor das letras, substitua o código destacado a cor amarela, pelo código da cor pretendida, e para alterar a cor do texto quando se passa com o cursor/rato por cima altere o #ffffff que se encontra também destacado a cor amarela. Não sabe qual é o código da cor que quer utilizar, então utilize a nossa tabela de cores.
Também pode alterar a cor da barra que se desloca à medida que passa o rato/cursor pelos links, para isso basta substituir o código destacado a cor roxa pelo código da cor que quer usar. Mais uma vez aconselho-o a utilizar a nossa tabela de cores.
Depois de feitas todas estas modificações que o ajudaram a personalizar todo o seu menu horizontal com Linha Mágica, guarde todas as alterações, para isso clique em Guardar Modelo (pt-PT) ou Salvar Modelo (pt-BR).
Para finalizar o nosso tutorial, dirija-se à sub-aba Elemento de Página, disponível na aba Design.
Adicione um gadget HTML/JavaScript, se não sabe como adicionar leia o post destacado abaixo:

Gadget HTML/JavaScript: Como adicionar?

No gadget HTML/JavaScript cole o código abaixo:

<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="URL_DO_SEU_BLOG">Home</a></li>
<li><a href="URL_DO_LINK">NOME_DO_LINK</a></li>
<li><a href="URL_DO_LINK">NOME_DO_LINK</a></li>
<li><a href="URL_DO_LINK">NOME_DO_LINK</a></li>
<li><a href="URL_DO_LINK">NOME_DO_LINK</a></li>
<li><a href="URL_DO_LINK">NOME_DO_LINK</a></li>
</ul>
</div>

Faça as alterações. Na parte destacada a azul adicione os links das páginas. Na parte destacada a verde adicione o nome das páginas.
Para que os links sejam abertos numa nova janela adicione o código destacado a vermelho no exemplo abaixo:

<li><a href="URL_DO_LINK" target="_blank">NOME_DO_LINK</a></li>

TUTORIAL CHEFE

Menu Horizontal com Linha Mágica [jQuery e CSS]