23 de set de 2015

Como fazer um Menu Fixo no Blogger

Um dos pedidos da nossa aba de sugestões foi o “Menu Fixo sem HTML“, mas isso seria bom demais pra existir de verdade! Para fazer um menu, vocês vão precisar de um conhecimento básico de HTML mas hoje vou ensinar para vocês a forma mais simples possível de se ter um menu organizado e fácil de editar no Blogger. A primeira coisa que você precisa saber é interpretar o código do seu menu. Não ensinarei como fazê-lo mas vou disponibilizar um código que adaptei para o meu blog e explicarei como editá-lo.

Começamos pelo CSS do menu. Ele irá definir cor, fonte, posição, entre outras coisas importantes. Vá no painel do seu blog e clique na aba “Modelo”. Não sabe onde encontrar?  Veja o Guia Básico do Blogger. Uma nova página abrirá com o seu layout. Siga os seguintes passos:

  • Clique em editar HTML
  • Clique em algum lugar no meio do código
  • Pressione CTRL+F (a barrinha de procurar irá aparecer)
  • Escreva nela “body {” e aperte ENTER.

Pronto, o local que apareceu está dentro do seu CSS. No caso do Blogger, o início do CSS é marcado pelo código <b:skin> e o final por  </b:skin>. O código abaixo deve ser colocado após a chave de fechamento. Mas o que é isso? Eu pedi para vocês procurarem por body { após isso haverá um código e dai terá uma chave fechando }. APÓS ela você poderá colar o código abaixo sem medo de desconfigurar o seu tema. Em geral, não faz diferença onde você cola o código, desde que seja após uma chave de fechamento e dentro do CSS.

#menutopo {
 background: #cbe2dc; /* Cor do fundo */
 border-left: 200px solid #cbe2dc;  /* Cor da borda */
 width: 100%; /* Largura */
 height: 50px; /* Altura */
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999; }
#menu {
 background: #fff;      
 font-family: Century, sans-serif; /* Fontes */
 font-size: 16px; /* Tamanho da Fonte */
 text-transform: uppercase;
 }
#menu li {
 list-style-type: none;
 display: inline;
 float: left; 
 padding: 0px;
 }
#menu li a {
 color: #fff;
 text-decoration: none;
 padding-right: 24px;
 line-height: 37px;
 }
#menu a:hover {
 color: #EED5D2; /* Cor da fonte ao passar o mouse */
 }
#menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
 background: #fff;
 margin-left: 40px;
 }
 #menu li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 120px;
 padding-left: -40px;
 }
#menu li ul a {
 font-size: 12px;
 line-height: 24px;
 }
#menu li:hover ul ul,
 #menu li:hover ul ul ul,
 #menu li.sfhover ul ul,
 #menu li.sfhover ul ul ul {
 left: -999em;
 }
#menu li:hover ul,
 #menu li li:hover ul,
 #menu li li li:hover ul,
 menu li.sfhover ul,
 #menu li li.sfhover ul,
 #menu li li li.sfhover ul {
 left: auto;
 }
#menureparo {
 float: right;
 color: #fff;
 }

Agora vamos aprender o significado de alguns códigos para poder editar o nosso menu.

Background: Esta tag irá definir o FUNDO do seu menu. Ele pode ser uma imagem ou uma cor, veja abaixo como fica para cada um deles:]

  • Cor: background : #000000;

Basta colocar o código da cor que você quer que fique no fundo do menu após os dois pontos. Veja aqui a tabela de cores e seus códigos em HTML. Esta tabela poderá ser usada toda vez que você quiser mudar a cor de alguma parte do menu.

  • Imagem:  background url(“Link da sua imagem”) ;

Para que seu fundo seja uma imagem, você precisará hospedá-la em algum servidor (recomendo o Imgur) e colocar o link onde se pede no código acima. Como o menu pode ocupar a tela inteira, caso você escolha uma imagem menor do que o menu, ela irá se repetir de forma a preencher o espaço vazio.

Border: Este atributo irá definir a borda do menu, sua posição, cor e tipo. Neste caso, a borda foi colocada de forma a saltar um espaço do canto da tela para que o menu fique centralizado.No nosso menu ela está na posição esquerda (left), sólida (solid), afastada 200px da esquerda (left: -200px) e na cor #cbe2dc.

Width: É a largura, colocamos 100% para que ele ocupe a tela inteira, que é o ideal.
Height: A altura do menu, no caso coloquei 50px. Quanto maior o número colocado, mais “grosso” ficará a faixa do seu menu.
Position: Fixed. Essa é a configuração que permite que o seu menu fique fixo no topo da página. Caso não queira que ele fique fixo, basta trocar a palavra fixed por absolute.
Top: Significa a distancia do topo da página que ficará o seu menu, colocando 0 (zero), garantimos que ele fique exatamente no começo do seu blog.
Left: Significa a distancia da esquerda da página que ficará o seu menu, colocando 0 (zero), garantimos que ele fique exatamente no começo  do lado esquerdo do seu blog.
Assim como você usou o Top e o Left, você pode usar o Right e o Down, se você quer que seu menu fique a direita ou na parte de baixo da sua página. No nosso menu, tanto faz colocar na esquerda ou direita, pois ele ocupa toda a largura do blog.
Z-index: É a camada da página em que o menu ficará. Por exemplo, se seu cabeçalho está na camada 2 e seu menu na camada 1, o que acontece? O seu menu ficará abaixo do seu cabeçalho e não aparecerá. Colocamos um número bem grande como 999 para não correr o risco disso acontecer.
Font-family: Simplesmente, a fonte a ser usada nos títulos. Você pode colocar as fontes padrão de HTML ou utilizar o Google Web Fonts ou Cufon para inserir novas fontes.
Font-size: Tamanho da fonte dos títulos, quanto maior o número, maior a fonte.
Text-transform: Serve para adicionar uma característica a todos os textos que estiverem dentro do seu menu. Uppercase significa que todas as letras serão maiúsculas. Lowercase, todas minúsculas. Caso você não queira isto, basta apagar este código.
Hover: Quando temos um atributo em hover significa que ele irá mostrar algo quando a pessoa passar com o mouse por cima. No nosso menu, o hover irá trocar a cor dos links dos títulos, por exemplo antes de passar o mouse era branco e com o mouse em cima preto. Basta então escolher a sua cor na tabela de cores e colocar o código.

Após configurar tudo, colocaremos o menu no layout. Ao invés de perder tempo procurando o lugar exato de colocar o código, vamos simplificar. Vá em Layout no seu painel e clique em Adicionar um Gadget abaixo do seu cabeçalho. Depois vá em HTML/JavaScript. Veja o print abaixo e consulte o Guia do Blogger, caso não consiga entender:

 Gadget Blogger

Então, basta adicionar na janela que apareceu o código do seu menu.

<div id="menutopo"><div id="menu">
<li><a href="http://Link.blogspot.com.br">HOME</a></li>
<li><a href="http://Link.blogspot.com.br/search/label/exemplo">TÍTULO</a></li>
<li><a href="http://Link.blogspot.com.br/search/label/exemplo">TÍTULO</a></li>
<li><a href="http://Link.blogspot.com.br/search/label/exemplo">TÍTULO</a></li>
<li><a href="http://Link.blogspot.com.br/search/label/exemplo">TÍTULO</a></li>
</div><div id='menureparo'></div></div>

O título normalmente serve para você identificar o que é aquele gadget, então coloque “Menu”. E assim, basta então escolher o que quer colocar nele e os links. Por exemplo: Em HOME, substitua a palavra link pelo nome do seu blog. O /search/label/exemplo serve para identificar a sua postagem de determinado marcador, por exemplo, faça uma postagem contando sobre o blog e você e marque com about. Basta substituir no menu o link pelo nome do seu blog, título por algo de sua preferência e a palavra exemplo por about. Dai, quando a pessoa clicar no seu título, aparecerá o post no qual você escreveu sobre você e o blog.


Qualquer dúvidas ou sugestões, deixem um comentário!

Beeijos e até a próxima :3



  • Manuela Lopes

    Em 23.09.2015

    Aaaah, preciso de um tutorial desse, só que pra wordpress!! kkkk :]
    Parabéns por disponibilizarem esse tipo de conteúdo assim de forma tão didática.
    Bjão!

    Responder

  • Luana França

    setembro 23rd, 2015

    @Manuela Lopes, O código é o mesmo se você quiser colocar no WordPress, o css vai no mesmo lugar e o que vai mudar é que você vai precisar saber onde colocar certinho o código do menu. A Ana Flávia costuma fazer os tutoriais de WordPress aqui, quem sabe ela não te ajuda :3

    <3 beeijo

    Responder

  • Ohara

    Em 23.09.2015

    Oi Luuuu!<333
    Seus tutoriais tão me ajudando super, me ensinam super sabe? é porque eu vou começar com blogger e favoritei aqui o seu guia básico da plataforma!
    É claro que um dia vou migrar pro wordpress, sim! mais como vou começar com blogger, aprendo sobre blogger primeiro, e depois eu mecho com isso.
    Como assim na sua descrição vc fala q ta com o blog em construção, em todo esse tempo? desde novembro do ano passado? e sem querer fazer spam, digo,
    sem querer insentivar essa pratica: não é bem por esse lado, mais como eu gosto de conhecer blogs novos, qual e teu blog? eu ja perguntei em outro
    post, o do guia, maaaas como não respondeu os comentários que eu e outras pessoas deixaram, eu perguntei de novo.
    Caso tenhaa respondido, pode largar essa perguntinha rs
    Amo seus tutoriais aqui!
    bjooooos<333 e até outra hora, dia, mes, sei la kkkk.

    Responder

  • Luana França

    setembro 23rd, 2015

    @Ohara, Oi tudo bem? Então eu sou enrolada mesmo, o layout tá praticamente pronto aqui, mas não sei que nome dar pro blog. Desculpa não responder lá, eu realmente não vi o comentário.
    Espero que esteja ajudando mesmo, deixa sugestões lá! :3
    Obrigada <3

    Responder

  • Ohara

    Em 23.09.2015

    Ok Lu! sem problema rs. eu tb sou super ruim na hora de dar nome pras coisas, isso inclue um blog. primeiro eu quis colocar de janeiro a janeiro,
    descobri que tem blog nesse endereço: depois eu quis colocar cai fora, blog no endereço! depois foi: deixa eu te falar: blog no endereço! depois foi:
    ta explicado, blog no endereço! 200 por hora blog no endereço! todos inativos, parados, iatus total. tive outros nomes 2 ate em inglês, não irei
    revelá-los, pois não tem blogs nos endereços hauha
    Tinha um nome de uma musica q tava super cotado até eu parar de gostar da banda. ate veio blog da Ohara o que achei bem clichê sabe? ia ficar normal
    de mais. serio, seus tutorias me ajudam super, salvei aquele tb favoritei um q vc falava sobre colorização, eu sempre gostei de mecher mais com
    image read huehue bjooooos<333

    Responder

  • Luana França

    outubro 7th, 2015

    @Ohara, Eu já tentei vários nomes, já quis vários que estão inativos. Acho que estou numa crise existencial KKKKK e assim o tempo vai passando e eu me preocupando com trabalho e faculdade vou adiando o blog, mas eu espero que quando eu consiga o nome ideal, dê tudo certo. ;)

    Responder

  • Maria Clara

    Em 23.09.2015

    Esse pot foi suuuper útil pra mim! Obrigada! Amoo esse blog! Beeijos!

    Responder

  • Thayna

    Em 23.09.2015

    Definitivamente o melhor blog !!! <3

    Responder

  • Thayna

    Em 23.09.2015

    Uma duvida como coloco a barra de pergunta??

    Responder

  • Beatriz Dias

    Em 23.09.2015

    Queria agradecer de coração pelo tutorial. Eu era doida por um menu desses <3 Você explica muito bem!

    Responder

  • Mariely

    Em 23.09.2015

    Meu Deus, como assim eu não conhecia esse lugar maravilhoso ? Obrigado pelo post, nem precisei alterar nada no html só adicionei o trecho position: fixed; e pronto. Ajudou muito, virei leitora totalmente <3

    Responder

  • Nathalia C.

    Em 23.09.2015

    Tenho vontade de abraçar vocês >..< <3

    http://www.voarlonge.com

    Responder

  • Jenifer

    Em 23.09.2015

    Olá. Segui tudo como escrito e o meu menu não quer mudar de cor, somente as letras mudaram…

    Responder

  • Catarina

    Em 23.09.2015

    Olá! Tenho uma dúvida: como é que eu centralizo o menu? Se mexer apenas no border-left isso não me centra o menu para todos os tamanhos de ecrã. Por exemplo, no meu computador pode ficar centralizado mas no seu não porque tem uma resolução diferente. Se puder ajudar-me, agradeço!

    Responder

  • Sabrina Marques Lima

    Em 23.09.2015

    Olha o tutorial é ótimo. Deu super certo! Mas fica uma linha cinza entre as abas e eu não consigo tirar. Podem me ajudar?

    Responder

  • Viviane

    Em 23.09.2015

    Adorei o post, o melhor que li falando sobre esse assunto, muito bem explicado.
    Fazia tempos que vinha tentando colocar esse menu no meu blog e não estava conseguindo.
    Parabéns pelo post!

    Responder