25 abril 2016

Menu Fixo Simples no Blog

Menu no Blog Tutorial


Trouxe um tutorial super legal que eu aprendi no site butlatriz.com agora você vai aprender a por um menu fixo simples igualzinho ao meu. Vem comigo.

Usei um blog teste para fazer esse tutorial*

Criando um Estilo Para o Menu


1- Vá em Modelo e Editar Html

Menu Fixo Tutorial


2- Dentro do quadrado com com os códigos pressione  CTRL+F, vai abrir uma caixa de pesquisa. Nessa caixa digite: ]]></b:skin> e aperte Enter

Menu Fixo - Tutorial para blog

3- ANTES da tag ]]></b:skin> cole o código abaixo ACIMA da tag.

.menutopo { z-index: 333; position: fixed; top: 0px; left: 0px; right: 0px; height: 25px; padding:18px; color: #fff; background-color: #000; font-size: 18px; text-align: center; font-family: 'Calibri'; text-transform: uppercase; }
.menutopo a { color: #fff!important; margin-right: 20px; }
.menutopo a:hover {  text-decoration:underline }
.menutopo img { margin-top: -3px; align:right; width: 35px; margin-left: 5px; float: right;}



Menu Fixo no Blog


Entendendo o códgio:
 color: #fff  - cor da fonte (os dois "color" tem que ser da mesma cor)
background-color: #000 - cor do fundo
font-size: 18px - tamanho da fonte
font-family: 'Calibri' - nome da fonte
text-transform: uppercase - texto maiúsculo
 text-decoration: underline - texto sublinhado (quando passa o mouse) / para tirar, é só no lugar de underline colocar none
padding: 18px - tamanho em volta. Mude o valor para deixar mais fino ou mais largo.

No código o a:hover você pode mudar a cor do link quando passar o mouse.

Tá com duvida na cor que vai usar? Então se liga nessa Tabela de Cores. É só escolher a cor e copiar o código que sempre vai começar com #
Ex: #C03838

Feito tudo isso clique em salvar. Veja se algo mudou no seu layout. Não mudou nada? Isso é bom sinal, de fato, nada vai mudar ainda esse é só o estilo do Menu.

Agora vá em Layout e adicione um Gadget na barra lateral


Tutorial de Menu Fixo


E cole o código:

<div class="menutopo">

<a href="/"> Início </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>

</div>



Agora você deve por seus links no LINKAQUI e onde está TÍTULO é o nome que vai aparecer.


Eis o resultado:

Menu Tutorial

Considerações Finais 

Usei o modelo Simples, fiz um blog teste para ensinar a vocês um pouco do que aprendi, vou utilizar esse mesmo para todos os tutoriais que virão. Quer ver o resultado? Então veja aqui Sou Adulta Agora Teste. Esse tutorial foi de nível fácil, mas alguma dúvida responderei nos comentários, caso ainda não tenha entendido made um email para leticiaoliveiraa94@gmail.com ficarei feliz em responder sua dúvida. Voltando a falar que esse tutorial aprendi na página butlatriz.com

E ai, gostaram? Foi fácil?

Estamos também no Twitter, Instagram e Facebook

53 comentários:

  1. Ótima dica, Leticia. Eu demorei bastante pra encontrar um tutorial que funcionasse, aí um belo dia cheguei nesses códigos xD

    Um beijo grande!
    Heeey, Maria! | Fanpage

    ResponderExcluir
    Respostas
    1. São super fáceis né? Nem acreditei como foi tão rápido fazer.

      Excluir
  2. Gostei bastante do tutorial.

    www.paginasempreto.blogspot.com.br

    Beijos

    ResponderExcluir
  3. Respostas
    1. Ah espere que ajude mesmo, é tão fácil e muita gente tem dúvida.

      Excluir
  4. olá Letícia, adorei o seu blog e amei o post, muito legal, estou te seguindo para não perde nada, vamos fazer parceria? me segue de volta, bjos horasnoespelho.com

    ResponderExcluir
    Respostas
    1. Passei no seu cantinho, super fofo e estou seguindo.

      Excluir
  5. ADOREI o tutorial, super Útil e facilzinho de fazer <3
    arrasouuu

    http://www.1001julietas.com/

    ResponderExcluir
  6. amei esse tutorial, vou tentar fazer no meu blog tbm, bjus

    dicasdachil.blogspot.com

    ResponderExcluir
    Respostas
    1. Ah que bom, se fizer me conta, quero muito ver.

      Excluir
  7. Post muito útil rs Adorei mesmo <3 <3 Um beijo Lee <3 http://lorennacostablog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Super útil né? Achei que as pessoas deveriam saber o quanto é fácil.

      Excluir
  8. Adorei o post =)
    Eu demorei bastante para encontrar algum post que ensinasse a fazer menu fixo!!!

    Mais Dicas

    ResponderExcluir
    Respostas
    1. Procurei horrores, nunca encontrava e quando encontrava não conseguia fazer de jeito nenhum.

      Excluir
  9. Adorei o post, bem fácil de entender.
    Parabéns linda. ♡

    http://blogpriscillamartinez.blogspot.com

    ResponderExcluir
    Respostas
    1. Ah obrigada, que bom que gostou :)
      http://souadultaagora.blogspot.com.br/

      Excluir
  10. Tutorial maravilhoso, tenha uma semana maravilhosa.
    Blog:http://arrasandonobatomvermelho.blogspot.com.br/
    Canal:https://www.youtube.com/watch?v=DmO8csZDARM

    ResponderExcluir
  11. Adorei o tutorial, mega útil e necessário.

    Beijos
    http://pimentasdeacucar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Acho super legal ensinar que não sabe, para mim foi super difícil conseguir fazer.

      Excluir
  12. OI!
    admiro quem tem paciência de fazer esses tutoriais!

    Um grande beijo!
    Momentos de moda e beleza

    ResponderExcluir
    Respostas
    1. Sempre quando eu procurava tutorial só encontrava códigos jogados na tela, eu ficava super em duvida, achei melhor fazer uma passo a passo, para facilitar.

      Excluir
  13. Muito bom seu tutorial, super bem explicado :)
    Beijos
    BlogCarolNM
    FanPage

    ResponderExcluir
    Respostas
    1. Que bom que gostou, me da um animo de fazer mais.

      Excluir
  14. Que legal..será que eu consigo??hahaha sou lenta pra essas coisas, mas gostei da ideia.


    Bjim ...
    blog Usei Hoje

    ResponderExcluir
  15. Ameeei o tutorial
    Um super beijo

    https://ladorosadomundo.blogspot.com.br/

    ResponderExcluir
  16. Olá, ameeeei o design do seu blog, está maravihoso!

    E seu post está ótimo também.

    Você já conhece o blogueira que Inspira ?

    www.blogueiraqueinspira.blogspot.com.br

    Se você me seguir, te sigo de volta ;)

    ResponderExcluir
    Respostas
    1. Oi, que bom que gostou, visitei o seu cantinho, muito lindo.

      Excluir
  17. Dá um visual bem mais bonito no blog, né?
    Adorei seu tutorial.

    Tem novidade lá no blog:
    http://florescendo-m.blogspot.com.br/

    ResponderExcluir
  18. Adorei o post, mais menina tenho confessar fico louquinha com esse negocio de HTML, mais você explicou bem no post.

    Beijos da Kah
    http://blogmundodakah.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fiquei com medo que não estivesse bem explicado, mas que bom que gostou :)

      Excluir
  19. Muito bom e útil esse menu. Adorei a dica :D acho que vou fazer no meu :)

    www.vivendosentimentos.com.br

    ResponderExcluir
    Respostas
    1. É super fofo e vale super a pena fazer.

      Excluir
  20. Adorei o post! Pena que não deu certo =/ coloquei a tag mas não achou ..
    Obrigada pela visita, linda! Até + ;*

    http://suenefernandes.blogspot.com.br/

    ResponderExcluir
  21. Poxa que pena, tem certeza, que fez tudo certinho? as vezes é uma coisa boba.

    ResponderExcluir
    Respostas
    1. Pois é! =/ fiz sim, do jeitinho que o post explica. ;*

      Excluir
  22. Boas dicas.

    Isabel Sá
    http://brilhos-da-moda.blogspot.pt

    ResponderExcluir
  23. Adoro esses posts que ajudam as blogueiras! Às vezes também posto algumas coisinhas de HTML e é uma delícia quando conseguimos ajudar alguém, né?

    Beijos, querida!
    Chiquereza

    ResponderExcluir
    Respostas
    1. Acho super legal ajudar, queria que fosse bem explicadinho, muitas vezes não consigo porque tá mal explicado.

      Excluir
  24. Amei o post ,não me dou muito bem em editar o HTML mais confesso que fiquei com vontade de tentar !Obg pelas dicas, seu Blog é Lindo! Beijão!
    www.magraderuim.com.br

    ResponderExcluir

- Participe e deixe se comentário! Ele é muito importante.
- Se você chegou até aqui não custa nada ler o post todo e dar uma opinião maior que só o tradicional " Gostei"
- Respondo todos os comentários e vou adorar visitar o seu blog caso deixe o endereço dele aqui.

Muito obrigada e volte sempre :)

Sou Adulta Agora - créditos

Tema Base por Butlariz