22 de mai de 2015

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 ABAIXO dele 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! 


Comente com o Facebook:

16 comentários:

  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

    ResponderExcluir
    Respostas
    1. Oi Natalia!
      Sua sugestão já está anotada, em breve farei este tutorial.
      Muito obrigado pela visita :D

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Adorei! Você me salvou, estava procurando um tutorial bom como esse e nunca achava, já estava quase desistindo hehe. Obrigada mesmo.

    www.vidasdesonhos.com

    ResponderExcluir
    Respostas
    1. Oi Ana!
      Que bom saber que te ajudei, o proposito do #DicasParaBlogs é exatamente esse.
      Obrigado pela visita :D

      Excluir
  4. Foi o único que conseguiu me ajudar, obrigada!

    ResponderExcluir
  5. Muito obrigada pela grande dica! Me ajudou bastante, parabéns pelo blog!

    ResponderExcluir
  6. Oi, ameii o post! Mas não entendi a parte do " " :/

    ResponderExcluir
  7. Eu não tô conseguindo mudar a cor da fonte, me ajuda?

    ResponderExcluir
  8. Muito obrigada,você é o anjo que abençoou a minha vidaaaa

    ResponderExcluir
  9. Olá, tu bem? Obrigado pela ajuda.

    Como posso colocar no html para redirecionar para a página inicial?

    Se eu coloco www.meublog.com no código..

    No site fica www.meublog.com/www.meublog.com

    Não sei como resolver isso

    Oibrgado!

    ResponderExcluir
  10. Olá, tu bem? Obrigado pela ajuda.

    Como posso colocar no html para redirecionar para a página inicial?

    Se eu coloco www.meublog.com no código..

    No site fica www.meublog.com/www.meublog.com

    Não sei como resolver isso

    Oibrgado!

    ResponderExcluir
  11. Menino você é nota 1000. além d pratico deu certo. Nenhum ouro esta dando certo no meu blog... Parabens!
    ✡✡Blog: Atellier Com Mãos de seda ✡✡
    ✡✡Fan Page do Blog✡✡
    ✡✡Participem de nosso Grupo✡✡

    ResponderExcluir
  12. 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

    ResponderExcluir

Image Map
TECNOLOGIA BLOGGER - DESIGN POR SUSAN SANTOS | PROGRAMAÇÃO HEART IDEAS