Translate

tste

*

Colocar uma barra de menu como essa no Blogger e um link em um botão do menu



✅ Passo a Passo para Instalar a Barra de Menu no Blogger

1. Vá em Tema > Editar HTML

2. Localize a tag <body> ou o local onde deseja inserir o menu (normalmente no topo)

3. Cole o seguinte código HTML acima do conteúdo principal do seu blog:

<!-- Menu Personalizado -->
<nav class="top-menu">
  <ul>
    <li><a href="/"><i class="fa fa-home"></i></a></li>
    <li><a href="/search/label/Windows">WINDOWS</a></li>
    <li class="dropdown">
      <a href="#">CATEGORIAS</a>
      <ul class="submenu">
        <li><a href="/search/label/Programas">Programas</a></li>
        <li><a href="/search/label/Jogos">Jogos</a></li>
      </ul>
    </li>
    <li><a href="/search/label/Ativador">ATIVADOR</a></li>
    <li><a href="/search/label/Baixador">BAIXADOR</a></li>
    <li><a href="/search/label/Temas">TEMAS</a></li>
    <li><a href="/search/label/Adobe">ADOBE</a></li>
    <li><a href="/search/label/Mod%20Android">📱 MOD ANDROID</a></li>
    <li><a href="/p/como-baixar.html">COMO FAZER O DOWNLOAD</a></li>
  </ul>
</nav>

4. Agora adicione o CSS para estilizar o menu

Logo antes da tag </head> do seu tema, adicione:

<style>
.top-menu {
  background: #222;
  font-family: Arial, sans-serif;
  padding: 0;
}
.top-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.top-menu ul li {
  position: relative;
}
.top-menu ul li a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}
.top-menu ul li:hover > a {
  background: #00aaff;
}
.top-menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  background: #333;
  min-width: 160px;
  z-index: 999;
}
.top-menu .submenu li a {
  padding: 12px 15px;
}
.top-menu li:hover .submenu {
  display: block;
}
</style>

✅ Resultado:

Você terá uma barra de menu com:

  • Ícone de casa (início)

  • Abas fixas

  • Menu suspenso (dropdown em “Categorias”)

  • Cores e estilo semelhantes ao que você mostrou

✅ Exemplo prático:

Se você quiser que o botão "BAIXADOR" leve para um link específico, como:


https://seusite.com/p/baixador.html

Você deve alterar esta parte:

<li><a href="/search/label/Baixador">BAIXADOR</a></li>

Para isso:

<li><a href="https://seusite.com/p/baixador.html">BAIXADOR</a></li>

🧠 Dica para Páginas Internas no Blogger

Se a página já foi criada dentro do próprio Blogger (como uma página estática), você pode usar:


<li><a href="/p/nome-da-pagina.html">TÍTULO DO BOTÃO</a></li>

Exemplo:

<li><a href="/p/como-baixar.html">COMO FAZER O DOWNLOAD</a></li>

✅ Botão com ícone (exemplo com Font Awesome):


<li><a href="https://youtube.com/@domineseudispositivo" target="_blank">
  <i class="fab fa-youtube"></i> YOUTUBE
</a></li>

Gostou do conteúdo? Inscreva-se no canal e receba mais novidades!

Asfalto 9: Lendas Mod

  Rasgue o asfalto na experiência definitiva de corrida para consoles e dispositivos móveis! Aproveite o intuitivo TouchDrive™ ao volante de...