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

Compartilhar:
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.

Com informações: CSS-Tricks - JQUery MagicLine Navegation.

Pronto, agora seu menu está adicionado e personalize-o como preferir. Boa sorte e abraços!
► Postagens Relacionadas:

30 Comentários

Denis Gomez disse...

Vou tentar fazer isto no meu blog! aquela borda laranja vou deixar só em baixo e com este efeito :)

24 de fevereiro de 2012 às 00:28
João Almeida disse...

Fique a vontade para personalizá-lo. Aliás, o autor do código disse que poderíamos fazer o que quissemos. Obrigado pela participação.

24 de fevereiro de 2012 às 13:57
Jane Dos Anjos disse...

Queria colocar uma pequena imagem ao lado do home na barra mesmo, tem como?

12 de março de 2012 às 20:08
João Almeida disse...

Não, neste menu não tem como. Pois ele funciona como um arquivo em Flash. Mas temos outras opções de menus. Como este que segue o link: http://joao987.blogspot.com/2012/01/adicionando-menu-posicionado-no-topo-do.html e http://joao987.blogspot.com/2011/03/widget-assinar-nosso-feed-para-blogger.html.
Brevemente farei um tutorial mostrando detalhadamente.

12 de março de 2012 às 20:20
Jane Dos Anjos disse...

Obrigada pela atenção, curti a pagina e virei fã viu, foi o primeiro site que me respondeu, são pessoas assim que precisamos... Parabéns pelo site. Bjs e obrigada vou dar uma olhada no tutoria recomendado!!

13 de março de 2012 às 07:29
Jane Dos Anjos disse...

Ahhhh e fiz viu!! Deu tudo certinho, ficou lindo!! bjs

13 de março de 2012 às 07:30
João Almeida disse...

Obrigado pelo seu carinho para com o blog e volte sempre!

13 de março de 2012 às 13:49
João Pedro   disse...

tem como trocar aquela cor azul por outra ?

1 de abril de 2012 às 13:37
João Almeida disse...

Se você estiver falando da cor da linha, basta procurar pela código: #fe4902;
Se você está falando das cores das linhas superior e inferior, basta substituir o código: border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
Espero ter ajudado.

1 de abril de 2012 às 20:42
Danilo LaGuardia disse...

Intalei seu menu e comecei a personalizar ele com as cores do meu layout, as estou tendo um problema embaraçoso. Não estou conseguindo trocar a cor da background dele. Continua preta.


Onde está o atributo que eu não consegui encontrar, João?


Fora isso, ficou ótimo. Grande abraço.

25 de setembro de 2012 às 18:13
João Almeida disse...

Danilo, você terá de encontrar dentro do código do passo 5 a seguinte linha:
.nav-wrap { margin: 0px auto; background-color: #000000; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }

E modificar a parte destacada em negrito.

25 de setembro de 2012 às 19:23
Danilo LaGuardia disse...

João... depois de uma breve surra do código, acabei resolvendo o problema, mas de qualquer forma, obrigado.


Meu(s) problema(s) no momento é(são) outro(s) e de repente você consegue me ajudar.


Esse menu foi instalado logo abaixo da header, e eu gostaria de colocar um outro acima da header, deixando dois menus.


Outra questão que não estou conseguindo resolver, é aninhar dentro do menu outro widget. No caso em um eu gostaria de inserir ícones de compartilhamento tipo "Share this" e no outro uma barra de buscas.


Acha que consegue tirar essas dúvidas? Só pra você ver como está ficando a página teste, visite http://testemagazine1.blogspot.com.br


Li alguns dos tutoriais que você disponibiliza aqui, e são sensacionais. Grande abraço.

26 de setembro de 2012 às 09:03
João Almeida disse...

Olá Danilo, acho que não dá certo você "aninhar" este menu com outro Widget, pois ele funciona através de script. Mas para colocar o widget acima do cabeçalho, basta procurar o código referente ao cabeçalho (não irei colocar aqui pois o DISQUS corta) e cola o código do menu acima do código do cabeçalho (header).


Caso queira explicar melhor a dúvida em relação ao botões de compartilhamento, entre em contato conosco, tá certo?

26 de setembro de 2012 às 14:47
Jhonn Moryyn disse...

quando eu fui visualizar apareceu:
O modelo é inválido. Certifique-se de que ele está com a formatação correta e cumpre as Especificações de Código para Modelos do Blogger.
Error 500

28 de setembro de 2012 às 09:45
Jhonn Moryyn disse...

Como postar algo em um local do menu do blog ? Obs: eu to usando o menu horizontal com linha mágica.

28 de setembro de 2012 às 10:47
João Almeida disse...

Provavelmente você já conseguiu..

28 de setembro de 2012 às 13:01
João Almeida disse...

Não entendi sua dúvida. Você quer colocar mais link no menu?

28 de setembro de 2012 às 13:01
Jhonn Moryyn disse...

tem lá o menu, exemplo: contatos FAQ Dowloads , e eu quero postar em dowloads,como eu faço ?

28 de setembro de 2012 às 16:38
Jhonn Moryyn disse...

respooondeeeeeeeeee !

28 de setembro de 2012 às 17:18
João Almeida disse...

1. Eu não passo eu dia inteiro no computador, devido a isso não pude lhe responder assim que você postou. 2. Caso você queira que as postagens com downloads apareçam no menu Downloads, você terá de colocar as postagens como Marcador Downloads e lá no HTML do menu onde você tem de colocar o link, você usa o link de downloads (exemplo: http://seublog.blogspot.com.br/search/label/Downloads)

28 de setembro de 2012 às 19:11
Jhonn Moryyn disse...

Valeu João , obrigado ajudo muito !

29 de setembro de 2012 às 18:16
Jhonn Moryyn disse...

Porque ta aparecendo : "A página que você está procurando neste blog não existe."
desculpe incomodar :(

29 de setembro de 2012 às 18:37
Danilo LaGuardia disse...

Acabei encontrando a solução, João... o menu que encontrei tem a barra de buscas já inserida. É feio que dói, mas nada que uma alterações básicas na CSS não resolva. Fica como dica pra tu dar uma olhada


http://www.noticiaeblog.com/2009/12/menu-horizontal-com-caixa-de-busca.html

1 de outubro de 2012 às 18:09
João Almeida disse...

Realmente ele é muito feio. Mas como você disse, nada que uma bela pitada de CSS resolva. Obrigado e breve estarei fazendo um post sobre o mesmo.

1 de outubro de 2012 às 22:32
Jhonn Moryyn disse...

João , num tem aquele que ta no seu blog , o template teste , ok ?

9 de outubro de 2012 às 22:59
João Almeida disse...

Sim, o que tem ele?

11 de outubro de 2012 às 19:21
Jucélio disse...

João, vlw pelas dicas, mas eu gostaria de saber como faço para que a linha fique parada na pagina que estiver sendo exibida pois ela fica sempre em HOME, entou fazendo ela em um blog de teste http://blogdetestes732.blogspot.com.br/

Da essa força ai.

3 de janeiro de 2013 às 03:43
João Almeida disse...

Olá Jucélio!

Infelizmente não é possível fazer isso.

3 de janeiro de 2013 às 23:05
Larissa disse...

Tem como colocar esse menu no topo do blog? E se tiver, como?

3 de dezembro de 2013 às 22:50
João Almeida disse...

Oi Larissa. Você faz todos os passos, menos o 7 e diante. Quando você for por o menu, você procura pela tag e cola o código ACIMA dela. Você pode se basear por esse tutorial http://joao987.blogspot.com.br/2012/01/adicionando-menu-posicionado-no-topo-do.html#.Up6A69JDs3k

3 de dezembro de 2013 às 23:14

Postar um comentário