Adicionando menu horizontal com linha mágica nos blogs do Blogger + Adicionando menu horizontal CSS

Olá queridos leitores, hoje veremos como adicionar um menu horizontal com linha mágica no seu blog. Um menu horizontal com linha mágica é um menu em que uma borda inferior segue o mouse ao passar pelo link e ao tirar o  mouse sobre o link, a linha volta ao primeiro link. Você pode visualizar uma demonstração clicando aqui e vamos ao tutorial!

1. Acesse a guia Modelo do seu blog e clique no botão Fazer backup/Restaurar, depois faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Ainda na guia Modelo, clique no botão Editar HTML. Logo depois, pressione Ctrl+F para abrir o Localizador do seu navegador e procure pelo código abaixo.

</head>

3. Imediatamente acima deste código, cole o seguinte código acima do mesmo.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script src='http://categoriabloggeruplod.webs.com/JavaScript/menu-linha-magica' type='text/javascript'/>

Caso você já tenha a versão 1.3.2 do JQuery instalada em seu blog, não volte a adicioná-la, apenas copie o código que está destacado de vermelho. Caso não tenha a versão 1.3.2 do JQuery instalada, copie todo o código acima.
4. Ainda Editar HTML ativada, pressione novamente Ctrl+F para abrir o Localizador do navegador e procure pelo código abaixo.

]]></b:skin>

5. Imediatamente acima deste código, cole o código a seguir acima do mesmo.

/* 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; }

Substitua a parte destacada de vermelho por uma cor hexadecimal para cor de fundo. Substitua as partes destacadas de azul pela cor da borda superior e a borda inferior. Substitua as partes destacadas de verde pela cor de texto e pela cor de texto quando passada pelo mouse. E por fim, substitua a parte destacada de laranja pela cor da linha mágica que seguirá o mouse.

6. Depois, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

7. Agora, clique na guia Layout e clique em Adicionar um gadget. Escolha a opção Editar HTML/JavaScript e cole o seguinte código dentro da opção Conteúdo.

<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="LINK-DO-SEU-BLOG">Home</a></li>
<li><a href="SEU-LINK">NOME-DO-LINK</a></li>
<li><a href="SEU-LINK">NOME-DO-LINK</a></li>
<li><a href="SEU-LINK">NOME-DO-LINK</a></li>
<li><a href="SEU-LINK">NOME-DO-LINK</a></li>
<li><a href="SEU-LINK">NOME-DO-LINK</a></li>
</ul>
</div>

Substitua as partes destacadas de vermelho pelos links desejados. Substitua as partes destacadas de azul pelos nomes dos links desejados.

8. Clique em Salvar e depois em Salvar organização.



Resultado: