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
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
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;}
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
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:
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
Ótima dica, Leticia. Eu demorei bastante pra encontrar um tutorial que funcionasse, aí um belo dia cheguei nesses códigos xD
ResponderExcluirUm beijo grande!
Heeey, Maria! | Fanpage
São super fáceis né? Nem acreditei como foi tão rápido fazer.
ExcluirGostei bastante do tutorial.
ResponderExcluirwww.paginasempreto.blogspot.com.br
Beijos
Ah que bom que gostou :)
ExcluirAdorei o post, super explicativo. Parabéns!
ResponderExcluirBeijinhos ❤
http://www.alecanofre.com/
https://www.youtube.com/alecanofremakeup/
Fico feliz que tenha gostado.
ExcluirQue dica ótima, vai ajudar mt gente!
ResponderExcluirBeijos/Xoxo.
Anete Oliveira
Blog Coisitas e Coisinhas
Fan Page Coisitas e Coisinhas
Instagram
Ah espere que ajude mesmo, é tão fácil e muita gente tem dúvida.
Excluirolá 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
ResponderExcluirPassei no seu cantinho, super fofo e estou seguindo.
ExcluirADOREI o tutorial, super Útil e facilzinho de fazer <3
ResponderExcluirarrasouuu
http://www.1001julietas.com/
Super fácil né?
Excluiramei esse tutorial, vou tentar fazer no meu blog tbm, bjus
ResponderExcluirdicasdachil.blogspot.com
Ah que bom, se fizer me conta, quero muito ver.
ExcluirAmei o tutorial!!
ResponderExcluir❤Blog Luanne Oliveira❤
Fico feliz que tenha gostado ❤
ExcluirPost muito útil rs Adorei mesmo <3 <3 Um beijo Lee <3 http://lorennacostablog.blogspot.com.br/
ResponderExcluirSuper útil né? Achei que as pessoas deveriam saber o quanto é fácil.
ExcluirAdorei o post =)
ResponderExcluirEu demorei bastante para encontrar algum post que ensinasse a fazer menu fixo!!!
Mais Dicas
Procurei horrores, nunca encontrava e quando encontrava não conseguia fazer de jeito nenhum.
ExcluirAdorei o post, bem fácil de entender.
ResponderExcluirParabéns linda. ♡
http://blogpriscillamartinez.blogspot.com
Ah obrigada, que bom que gostou :)
Excluirhttp://souadultaagora.blogspot.com.br/
Tutorial maravilhoso, tenha uma semana maravilhosa.
ResponderExcluirBlog:http://arrasandonobatomvermelho.blogspot.com.br/
Canal:https://www.youtube.com/watch?v=DmO8csZDARM
AH que bom que gostou :)
ExcluirAdorei o tutorial, mega útil e necessário.
ResponderExcluirBeijos
http://pimentasdeacucar.blogspot.com.br/
Acho super legal ensinar que não sabe, para mim foi super difícil conseguir fazer.
ExcluirOI!
ResponderExcluiradmiro quem tem paciência de fazer esses tutoriais!
Um grande beijo!
Momentos de moda e beleza
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.
ExcluirNossa que tutorial maravilhoso.
ResponderExcluiramei ;*
http://www.maricotacaradericota.com/
Fico feliz que amou :)
ExcluirMuito bom seu tutorial, super bem explicado :)
ResponderExcluirBeijos
BlogCarolNM
FanPage
Que bom que gostou, me da um animo de fazer mais.
ExcluirAdorei a dica e o tutorial!
ResponderExcluirBeijo!
Que bom que gostou :)
ExcluirQue legal..será que eu consigo??hahaha sou lenta pra essas coisas, mas gostei da ideia.
ResponderExcluirBjim ...
blog Usei Hoje
Consegue sim, claro! É super fácil.
ExcluirAmeeei o tutorial
ResponderExcluirUm super beijo
https://ladorosadomundo.blogspot.com.br/
Que bom que gostou!
ExcluirBeijo.
Dá um visual bem mais bonito no blog, né?
ResponderExcluirAdorei seu tutorial.
Tem novidade lá no blog:
http://florescendo-m.blogspot.com.br/
Dá, fica super clean.
ExcluirAdorei o post, mais menina tenho confessar fico louquinha com esse negocio de HTML, mais você explicou bem no post.
ResponderExcluirBeijos da Kah
http://blogmundodakah.blogspot.com.br
Fiquei com medo que não estivesse bem explicado, mas que bom que gostou :)
ExcluirMuito bom e útil esse menu. Adorei a dica :D acho que vou fazer no meu :)
ResponderExcluirwww.vivendosentimentos.com.br
É super fofo e vale super a pena fazer.
ExcluirAdorei o post! Pena que não deu certo =/ coloquei a tag mas não achou ..
ResponderExcluirObrigada pela visita, linda! Até + ;*
http://suenefernandes.blogspot.com.br/
Oi, que bom que gostou, visitei o seu cantinho, muito lindo.
ResponderExcluirPoxa que pena, tem certeza, que fez tudo certinho? as vezes é uma coisa boba.
ResponderExcluirPois é! =/ fiz sim, do jeitinho que o post explica. ;*
ExcluirAdoro 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é?
ResponderExcluirBeijos, querida!
Chiquereza
Acho super legal ajudar, queria que fosse bem explicadinho, muitas vezes não consigo porque tá mal explicado.
ExcluirAmei 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!
ResponderExcluirwww.magraderuim.com.br