Como fazer seu menu do Blogger flutuar enquanto você rola o mouse

A pergunta que mais recebo é de usuários do Blogger que desejam saber como fazer seu menu de navegação flutuar enquanto o usuário percorre a página. Isso pode ser muito útil e adicionar à sua experiência de usuário, pois o visitante não terá que percorrer todo o caminho de volta até o topo da página para ver o seu menu links.

Método 1: Menu no início do conteúdo

A primeira e mais fácil maneira de fazer isso é simplesmente posicionar o menu de navegação no topo da página e permitir que ele fique em uma posição fixa (flutuante) quando o usuário rola para baixo. Mantendo o seu menu no topo da sua página irá evitar ter que adicionar qualquer JavaScript, por isso, se você não está confortável com a edição do código do seu blog, então este é o método para você! Aqui está um exemplo:

Certifique-se de que você adicionou o widget "Páginas" do Blogger a uma das áreas de cabeçalho na página Layout (os espaços de cruzamento de Cross-Column ou Cross-Column2). Em seguida, siga as etapas abaixo:

1. Vá até a página Modelo> Personalizar.

2. Selecione Avançado no menu lateral e, em seguida, Adicionar CSS

3. Se você já inseriu CSS personalizado nesta caixa, role para baixo até a parte inferior do seu código

4. Adicione o seguinte código CSS à caixa:

#navbar {display:none}

#PageList1 ul { 
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}

.content-inner {
margin-top:30px;
}

5. Altere a variável "max-width" para a largura total da sua área de conteúdo do blog. Você pode encontrar a largura do seu blog indo até a seção "Ajustar largura" e visualizando o número na área "Todo o Blog".

6. A variável "margin-top" deve ser a altura do seu menu de navegação. Você pode deixá-lo como está se você não tiver

7. Você também pode alterar a variável background-color para um código de cor hexadecimal de sua escolha. Agora está definido como branco.

Método 2: Menu abaixo do cabeçalho

O segundo método é para menus que estão posicionados abaixo da imagem de cabeçalho ou não posicionados diretamente na parte superior da tela ( como este ). Para blogs concebidos desta forma, você vai querer o menu para ficar em sua posição desejada em primeiro lugar, e depois flutuar no lugar como o visitante percorre passado onde está resolvido. Aqui está como conseguir isso:

1. Navegue até a página Modelo> Personalizar.

2. Selecione Avançado no menu lateral e, em seguida, Adicionar CSS

3. Se você já inseriu CSS personalizado nesta caixa, role para baixo até a parte inferior do seu código

4. Adicione o seguinte código CSS à caixa:

#navbar {display:none}

#PageList1 ul { 
height:30px;
background-color:#ffffff;
width:100%;
max-width:1100px;
z-index:1000;
}

5. Consulte os passos 5 a 7 acima

6. Salve as alterações e vá até a página Modelo> Editar HTML

7. Dê um click dentro da caixa de códigos e depois CTRL+F pra abrir a caixa de pequisa e nela procure por </head> e depois cole o código abaixo acima ta tag encontrada:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by I Can Build A Blog.com-->
<script type='text/javascript'>
//<![CDATA[ 
$(function() {
        var nav = $('#PageList1 ul');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                   });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});
//]]>  
</script>

8. Salve as suas alterações e visualize a sua página!

Nota: Se você tiver problemas com o menu e não fizer o que deveria, poderia ser uma questão de ter duplicado scripts jQuery em seu código de blog. Tente remover a primeira linha do código (mostrada novamente abaixo) e salve:

<Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Espero que este tutorial tenha sido útil a você!