Dicas para blog: Menu fixo no topo do blog

Olá pessoal, tudo certo com vocês?

Trouxe mais um post da série #DicasParaBlogs e dessa vez é um dos melhores tutoriais e um dos mais procurados também, que é COMO COLOCAR UM MENU FIXO NO TOPO DO BLOG!
Procurei este tutorial por muitos blogs, mas nenhum estava dando certo no Nem Paris Nem NY, então resolvi fazer eu mesmo este tutorial e estou muito feliz por ter conseguido. Espero que vocês gostem!

Vamos ao tutorial:

Como colocar barra fixa de menu no topo do blog

Antes de qualquer coisa você precisa fazer um backup do seu template, para isso vá em “Modelo”  > “Fazer backup/restaurar” e agora sim podemos começar o tutorial. 
Clique em “editar HTML”, clique dentro do código e aperte “CTRL F” e irá aparecer uma caixa de busca.

Cole dentro da caixa o código a seguir e clique “enter” para localizar: 
<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>
É muito importante encontrar esse código, caso você não o localize de primeira, vá tentando até o encontrar.
Depois de encontrar, cole ABAIXOdele o seguinte código: 

<!– BARRA FIXA NO TIPO – NEM PARIS NEM NY –>
<div style=’background: #6B6B6B; top: 0px; left: 0px; width: 100%; height:40px; z-index: 100; position: fixed;’> <div class=’conteudo-menu’>
<div class=’menu’>
<ul>
<div style=”color: #FCFCFC; font-size: 16px; word-spacing: 3px; font-family: Verdana; text-transform: uppercase”> 
<center>
<style type=”text/css”> 
a:link 
 text-decoration:none; 
</style>
<a href=’http://seu-link’>Nome do link</a>
&#xA0;&#xA0;<a href=’http://seu-link’> Nome do Link</a>
&#xA0;&#xA0;<a href=’http://seu-link’>Nome do Link</a>
&#xA0;&#xA0;<a href=’http://seu-link’>Nome do Link</a>
&#xA0;&#xA0;<a href=’http://seu-link’>Nome do Link</a>
 </center>
  </div></ul>
<div class=’clear’/>
  </div>
</div> 
    </div>
Depois de feito isso, clique em visualizar e veja se deu certo! 
Como personalizar
Alterar a cor da barra fixa (tabela de cores): ‘background: #6B6B6B 
Alterar a cor do dos links: color: #FCFCFC
Alterar o tamanho da fonte: font-size: 16px
Alterar a letra dos links: font-family: Verdana
Em “http://seu-link” substitua pela URL do link e em “Nome do Link” substitua pelo nome do seu link.
Obs: O código “&#xA0;” serve para dar espaço entra uma palavra e outra, portanto se quiser dar mais espaço ou retirar espaço é só adicionar mais esse código ou retirar 🙂

Mais dicas para blog: 

✐ Como colocar barra de pesquisa no blog
✐ Como e onde divulgar seu blog
✐ Como proteger seu blog contra plágio
✐ Google adsense no blog
✐ Ícones para redes sociais

Espero que o tutorial tenha ficado claro para todos e qualquer dúvida é só deixar um comentário! 

16 comentários em “Dicas para blog: Menu fixo no topo do blog”

  1. Lembro que na época que queria fazer isso foi uma dor de cabeça danada, até que achei um que se encaixou no meu, e aí vira e meche consegui fazer ele ficar do jeitinho que eu queria. Por isso gosto que você poste esses tutorias, devem ajudar muitas pessoas, mesmo alguns deles eu já conhecendo. Posso sugerir um? Acharia legal de você colocasse um de como colocar imagens nas categorias, já tentei e não consigo, hahaha. Beijos
    Desfocando Ideias

  2. Eita que deu certinho! Já cansei de revirar blog atrás de tutorial simples e não encontrava. Tava quase desistindo e encontrei o teu hahahaha Amei!

    A propósito, lindo site!
    Beijinhos <3

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *