Tutorial: Menu Fixo no Topo + Redes Sociais

Hi honey! Como estão? Hoje a postagem vai ser breve e direto ao assunto, eu trouxe um tutorial bem prático (e com um toque meu, claro) pra quem quer deixar o blog mais organizado e bonito visualmente: um menu fixo no topo da página, mas dessa vez com links de navegação à esquerda e ícones de redes sociais à direita. Esse tipo de menu dá uma carinha mais profissional pro blog, além de facilitar a vida de quem está navegando. E o melhor: dá pra fazer tudo sem mexer diretamente no código-fonte do template, só usando o recurso de gadgets do próprio Blogger. Bora colocar a mão na massa?

 O que tem de especial no menu?  

• Ele fica fixo no topo, mesmo quando a gente rola a página.
• Os links ganham um efeito de destaque suave quando passamos o mouse por cima.
• Os ícones das redes sociais aparecem no cantinho direito, com um leve zoom no hover.
• E tudo isso mantendo o estilo clean e responsivo!
• 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 */ .link-bar { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; border-bottom: 1px solid #ccc; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; z-index: 999; font-family: 'Abeezee', sans-serif; }

/* LINKS */ .link-group a { text-decoration: none; color: #000; padding: 8px 14px; margin-right: 10px; font-size: 11px; display: inline-block; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0.7; } .link-group a:hover { transform: scale(1.05); }

/* ÍCONES */ .icon-set { display: flex; align-items: center; margin-right: 40px; } .icon-set a { display: inline-block; margin-left: 10px; } .icon-set img { width: 40px; height: 40px; display: block; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0.7; } .icon-set img:hover { transform: scale(1.01); }

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-bar">

  <div class="link-group">

    <a href="/">Página Inicial</a>

    <a href="/">Resenhas de Livros</a>

    <a href="/">Nossos Projetos</a>

    <a href="/">Sobre o Blog</a>

  </div>

  <div class="icon-set">

    <a href="/" target="_blank">

      <img src="https://i.imgur.com/47skeQE.png" alt="Facebook" />     </a>

    <a href="/" target="_blank">

      <img src="https://i.imgur.com/PDDEPrT.png" alt="Instagram" />     </a>

    <a href="/" target="_blank">

      <img src="https://i.imgur.com/EJ2xtFe.png" alt="Youtube" />     </a> 

  </div></div>

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

 Personalizando 

• background-color: muda a cor de fundo da barra (ex: #fbeaff pra um rosinha claro).
• border-bottom: define a cor da linha inferior. Pode trocar por none se quiser sem borda.
• color: define a cor do texto dos links.

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. Se usar esse tutorial, me marca pra eu ver como ficou no seu cantinho!