Tutorial: Menu Fixo no Topo

Hi honey! Como estão? Hoje trago um tutorial rápido, prático e super delicado pra quem ama menus minimalistas e elegantes no topo do blog. Sabe aquele menu fixo, fininho, discreto, com links bem organizados e um toque cinza que combina com qualquer layout? Pois é ele mesmo que vocês vão aprender a instalar aqui! Neste passo a passo, vou mostrar como aplicar o código, ajustar os links e ainda personalizar do jeitinho que você quiser. Mas esse tutorial é diferente do que postei anteriormente, é bem básico mesmo e podem usar como base para outros menus. Vem comigo deixar seu cantinho na blogosfera ainda mais bonito!

 O que tem de especial no menu?  

• Fica fixo no topo do blog (mesmo quando a pessoa rola a página); 
• É fino, discreto e responsivo; 
• Tem animação suave com sublinhado no hover;
• Visualize ele aqui [+++]

 Aplicando no html 

1. Vá até o painel do Blogger.
2. Clique em "Tema" > botão ao lado de "Personalizar" > depois em "Editar HTML".
3. Procure por ]]></b:skin>
4. Cole esse código, antes de ]]></b:skin>
   

/* Barra fixa topo minimalista em tons de cinza */
.link.menu.fofo { position: fixed; top: 0; left: 0; width: 100%; background: #fff; display: flex; justify-content: center; gap: 50px; padding: 8px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); z-index: 9999; }

.link.menu.fofo a { color: #696969; text-decoration: none; font-weight: normal; font-size: 11px; padding: 4px 6px; letter-spacing: 0.06em; position: relative; transition: color 0.3s ease; }

.link.menu.fofo a::after { content: ""; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: #696969; transition: width 0.3s ease; } .link.menu.fofo a:hover { color: #696969; }

.link.menu.fofo a:hover::after { width: 100%; } body { padding-top: 40px; }

 Usando no blog 

1. Agora volte ao painel do Blogger e vá em Layout.
2. Escolha a seção "Barra lateral superior" ou "acima das postagens" (pode variar conforme seu tema). 
3. Clique em “Adicionar um gadget” > HTML/JavaScript.
4. No campo de conteúdo, cole o seguinte código HTML:

<div class="link menu fofo">
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Contato</a>
<a href="#">Projetos</a>
<a href="#">Créditos</a>
<a href="#">Parceiros</a>
<a href="#">F.A.Q</a>
</div>

Você pode editar os links e nomes conforme sua necessidade!

 Personalizando 

• As cores do texto (color)
• A cor do destaque (linha no hover)
• O espaçamento entre os links (gap)
• O tamanho da fonte (font-size)

Vou pedir que não saiam da postagem sem dizer o que acharam do tutorial. Me contem se testaram e se deu certo, mas qualquer dúvida comenta aqui que eu posso ajudar vocês, ou me procurem nas redes sociais. Estou gostando de estar compartilhando esses tutoriais aqui no blog, fico um pouco nostálgica da época em que fazia isso praticamente todos os dias!