Post Top Ad

quarta-feira, 3 de maio de 2017

Colocando um menu que se fixa no topo ao rolar a página do Blogger

Um menu que se fixa ao ao topo do blog, ao rolar a barra de rolagem da página até determinado ponto. É algo bem interessante e ao mesmo tempo diferente, deixando seu blog com uma cara moderna e atualizada.

Nota!
 Estarei usando um modelo simples do blogger, e por isso, se estiver usando um modelo personalizado, é possível que não funciona da forma correta, ou até mesmo não encontre o trecho de código em questão. E nestas circunstâncias, será necessário que tente inserir o código do menu em outro ponto do seu blog.
VAMOS AO TUTORIAL

- Acesse seu blogger, vá em "Tema"Editar HTML".
- Clique no código, pressione "CTRL+F" e pesquise por </header>
- Logo ABAIXO da tag encontrada cole o seguinte abaixo.

<div class="conteudo-menu">
<div class="menu">
<ul>
<li><a href="http://seu-link">Início</a></li>
<li><a href="http://seu-link">Sobre</a></li>
<li><a href="http://seu-link">Contato</a></li>
<li><a href="http://seu-link">Anuncie</a></li>
<li><a href="http://seu-link">Parceria</a></li>
</ul>
<div class="clear"></div>
</div>
</div>

Configurações: os trechos que devem ser alterados estão em negrito. Que é o link da página do blog (ou outra página, postagem ou marcador), e também o nome que será apresentado.
Caso queira adicionar novos links, bastará duplicar linhas de código que estão entre <li></li>, não se limitando apenas a quantidade de páginas do modelo.

- Agora procure pela tag ]]></b:skin> e logo ACIMA da tag encontrada cole o seguinte abaixo.
.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-bottom: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 37px;}
.menu ul { list-style: none; margin:0; }
.menu ul li {float: left; margin-top: 6px; padding: 6px; border-right: 1px dotted #ccc;}
.menu ul li:first-child { padding-left: 0;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}

Configurações:
#ededed - Substitua pela cor de fundo do menu.
880px - Substitua pela largura do seu blog. Você poderá ter acesso a essa informação em Modelo › Personalizar › Largura do blog.
#666 - Cor do texto do link.
#777 - Cor do texto do link ao passar o mouse sobre ele.

- Para finalizar procure pela tag </head> e logo ACIMA da tag encontrada cole o abaixo.
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery("document").ready(function($){ var nav = $('.conteudo-menu'); $(window).scroll(function () { if ($(this).scrollTop() > 168) { nav.addClass("menu-fixo"); } else { nav.removeClass("menu-fixo"); } }); }); </script>
Nota: Este é o código JavaScript jQuery, que da a função de fixar o menu ao topo da página. Sem ele, seria apenas um menu normal, sem nenhum efeito diferenciado. Neste código, o único trecho a ser alterado será o de vermelho, 168, que refere-se ao valor da altera entre o topo da página e o local onde se encontra o menu.

6. Salve o Modelo e visualize seu blog.

Nenhum comentário:

Postar um comentário

Espere...
2016TATILRA50

Nunca compartilharemos seu endereço de E-mail com terceiros.

Page views

GOOGLE+

SEGUIDORES

Usamos cookies próprios e de terceiros que entre outras coisas recolhem dados sobre seus hábitos de navegação para mostrar publicidades personalizadas e realizar análises de uso de nosso site.
Se continares navegando consideramos que aceita seu uso. Entendi Mais informações