Menu dentro de uma faixa

20 de mar. de 2013


  Sempre me perguntam isso, tanto por aqui quanto por email, e acreditem, não são poucas pessoas. Por isso resolvi trazer o tutorial para sanar de vez a dúvida de todos. 

O título do post ficou estranho, mas na verdade não achei uma "definição" melhor, bem, neste tutorial aprenderemos a colocar o menu dentro de uma faixa que percorre o blog todo na horizontal, dividindo o cabeçalho do resto do blog. É o que uso no meu layout :)


É super simples e não tem muito segredo, aposto que a reação de quem manja um pouco mais vai ser mais ou menos "-Como eu não pensei nisso antes?!" haha

Passo 1
O segredo está em usar dois backgrounds, um no topo do blog e outro no restante. É no background do topo que vamos inserir a faixa que ficará atrás do menu. Vejam:


1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
 3°) Apague tudo e coloque no lugar este código:
body, html {
 height: 300px; /** Altura do 1º background **/
 margin: 0;
 padding: 0;  }
body {
 font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat-x; }
html {
 background: url("URL do 2º background") repeat; }

Conjuntos (abra as imagens para salvar no tamanho original):




  


A partir dos exemplos vocês podem criar outras imagens, de acordo com seus gostos :)

Obs: Seu cabeçalho deve ter a altura igual ou próxima à do primeiro background, para facilitar o posicionamento do menu acima da faixa.

Passo 2
Agora que já criamos o fundo, temos que posicionar o menu em cima da faixa, certo? 
Para isso, vamos começar indo em Modelo > Personalizar > Avançado > Plano de fundo das guias e vamos deixar as duas cores em transparente.


Certifique-se de colocar o menu padrão do blogger logo abaixo do cabeçalho.



Se o menu não ficar posicionado em cima da faixinha, você terá que entrar no seu HTML e procurar por  .tabs-inner { e logo abaixo colar:
margin-top: -50px; /*para afastar o menu para cima ou baixo troque o número*/
margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/
Então é só ajustar os valores até que o menu fiquei posicionado corretamente. 
Lembrando que em margin-top valores negativos sobem e positivos descem. Em margin-left negativos vão para esquerda e positivos se deslocam em direção a direita.

Simples assim, espero que tenham gostado e que esse método tenha ficado claro para vocês! Kisses :*

89 comentários:

  1. Esse tutorial já está nos meus favoritos <3
    http://imperfeitaadolescente.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Amei seu blog lindo de mais tambem tenho:
      diariodahane.blogspot.com

      Excluir
    2. O meu deu errado :( o meu n achou body {

      Excluir
    3. O meu tb nao que saco !

      Excluir
    4. o meu tbm

      Excluir
    5. O Meu Achou body Mais Não Era Nada Nada Do Que Ela Disse Que Estaria Lá.. Então Fikei Com Medo De Mudar Algo!

      Excluir
    6. maria pre vc achar o Body } o seu tema tem que ser viagem.

      Excluir
  2. Oi,
    Awn, fica muito fofo né?
    Nem parece que esta em uma faxinha.. Você explicou muito bem!

    Kisses ;*
    ~ The Things Girls // Ajude-me com a meta?!

    ResponderExcluir
  3. MUITOOOO Obrigado querida Anny!! Estive a tarde toda á procura e vim ao seu blog para a visita diária e mais uma vez me ajudou!
    Sabe estou a criar o meu próprio theme e os seu tutoriais estão a torná-lo cada vez mais bonito!! (depois credito!)

    Beijo!
    http://luanarita.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Luana, me convida para eu entrar no seu blog =D

      Excluir
  4. Adorei! Fica tão legal (: Faz tempo que eu tinha vindo aqui. Adorei o layout ♥

    aperta-o-start.(blogspot.com)

    ResponderExcluir
  5. Ei, Anny, no código do meu layout não funcionou... só aparece o background 2, no blog inteiro. Não sei se é porque o código não tinha "body {" e eu coloquei no lugar errado... se puder dar uma olhada no meu blog e ver por que isso acontece... é o http://prefirocorujas.blogspot.com/
    Beijos
    Aguardo sua resposta

    ResponderExcluir
    Respostas
    1. O meu aconteceu mais ou menos a mesma coisa. O bg 1 tá no blog, dá pra notar onde começa o bg 2, porém a faixa branca não aparece. Eu usei a imagens daqui mesmo que você disponibilizou (a primeira) e não deu certo :xx podia me ajudar por favor?
      Pra você ver como ficou: http://andstartingtoshine.blogspot.com.br/

      Beeijos :**

      PS: Seu blog é muito fofo, decidi fazer eu mesmo as mudanças no meu blog e venho me basear no seu, parabéns! *-*

      Excluir
    2. Oi Eduarda,poderia me convidar pra entrar no seu Blog? Obg *-*

      Excluir
  6. Ameei,já tinha pensado nisso só que não arrisquei *-*

    http://princesadopanico.blogspot.com.br/

    ResponderExcluir
  7. Olá. Parabéns pelo novo layout!
    Te espero lá no meu blog flor :D
    Baci Alih

    www.blogjuntandoostrapos.blogspot.com

    ResponderExcluir
  8. Bem interessante, mas estou procurando me aprofundar no CSS e no HTML. Pra ajudar ajudar as pessoas, eu preciso saber um pouco mais sobre esses assuntos

    ResponderExcluir
  9. Anny eu não entendendo muito dessas coisas de blog e queria saber como você faz para botar esse banner ai do Go Imagine?

    ResponderExcluir
    Respostas
    1. Só copiar o código da caixinha e jogar num gadget de HTML/JavaScript :)

      Excluir
  10. Adorei! Muuuuiiito útil! Parabéns! OBS: Adorei o layout novo!

    ResponderExcluir
    Respostas
    1. Pena que o menu na faixinha ficou torto no IE9... Esse Internet Explorer é fogo! No Chrome e no Firefox ficou ótimo (Claro!)!:**

      Excluir
  11. Oi Anny!!
    Pode ensinar como se colocam aquelas faixas roxas onde diz passo um??? Era muito booommm !
    Beijão!
    http://luanarita.blogspot.pt/

    ResponderExcluir
    Respostas
    1. E como colocar a caixa de pesquisa no menu também (:

      Excluir
    2. Não encontrei o gadget do menu

      Excluir
  12. Eu já sabia como fazer! :)
    Uso assim mesmo, fica bem legal e organizado não é?
    Ótimo o tutorial, muito útil Anny! E os conjuntinhos uma graça, acho que usarei um bg aí pro resto do blog, óbvio com créditos!
    Beijocas linda!
    Caprichosdabiia.blogspot.com

    ResponderExcluir
  13. Fica muito lindo essa faixa no layout. :-)

    Blog novo → http://defeituosa.blogspot.com.br/

    ResponderExcluir
  14. Flor, o Back um Não esta subindo,.. =/

    ResponderExcluir
  15. Olá:D
    Adorei seu blog.
    Citei seu blog em minha postagem nova :D
    Beijos
    http://emummundopossivel.blogspot.com.br/

    ResponderExcluir
  16. Ameei a dicaaa !! muuuito útil...deixa o blog bem mais bonito mesmo...

    Ameeei seu blog !!!

    beijoos

    www.sweet.ninha.zip.net

    ResponderExcluir
  17. oi Anny, amei o post, super útil amei esse novo cabeçalho, foi você que fez esse 1º background? ficou super lindo, amei esse efeito degradê. muito lindo:)

    http://acerejarosa.blogspot.com.br/

    ResponderExcluir
  18. Gostei, mas pena que não sou boa em cabeçalho, ou pode ser preguiça.

    Anny se não for incomodo, segue meu blog? Recomecei ele.
    http://pensandoteen.blogspot.com

    ResponderExcluir
  19. ual muito lindo to terminando

    ResponderExcluir
  20. ual muito lindo to terminando

    ResponderExcluir
  21. Simplesmente ameeiii Fiz noo meuu!

    ResponderExcluir
  22. Muito util para o laiout que eu vou doar ok vou doar usei no layout okk

    http://layout-cupcakescoloridos.blogspot.com.br/

    http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
  23. OMG adorei o tuto,beijos ♥♥♥

    >New Animes

    ResponderExcluir
  24. Anny, depois de muito esforço o meu pegou direitinho no lugar, muito obrigada, teus tutoriais são maravilhosos!

    ResponderExcluir
  25. o meu não deu certo o menu ficou la em cima:(
    meu-mundo-alternativo.blogspot.com

    ResponderExcluir
  26. Gostei muito do tutorial vou usar em meu blog ta ?

    ResponderExcluir
  27. Noosa ajudou muito mesmo ame
    http://rebelde-amamos.blogspot.com.br/

    ResponderExcluir
  28. Deixa pra lá, já consegui!

    ResponderExcluir
  29. Adorei o tutorial, mas como se centraliza o menu? Beijos!

    ResponderExcluir
  30. cmo eu n pensei nisso antes? '-'

    ResponderExcluir
  31. Legal.Na maioria das vezes uso sempre as páginas,pq não sou muito bom em HTML.Esse tutorial vai me ajudar muito.

    ResponderExcluir
  32. Muito bom! Estou tentando colocar ele no meu blog. Ok, consegui. Mas o menu não fica centralizado no meio da faixa. :/
    Será o modelo dele? Com a segunda opção: para centralizar, também não consegui. Espero a resposta. ;D

    ResponderExcluir
  33. COMO EU NÃO PENSEI NISSO??? kkkkkkkkkk
    Realmente, muito fácil! Mt obrigada por postar! haha

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
  34. nossa amei seu blog participa do meu que participo de volta ^^
    http://lorranamirza.blogspot.com.br/

    ResponderExcluir
  35. PEERFEITO :)
    TO CRIANDO UM BLOG AGR , ME AJUDOU MUITO :)

    ResponderExcluir
  36. MUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUITO BOM O TUTORIAL, ATENDEU AS MINHAS EXPECTATIVAS, MUITO OBRIGADA MESMO U-U

    ResponderExcluir
  37. AMEEEI Anny, vc se supera a cada dia. Me ajudou mto, amo seu blog!

    ResponderExcluir
  38. Bom fiz tudo, só que a imagem to topo fica repetida e não se encaixa corretamente

    ResponderExcluir
    Respostas
    1. Luiana, A minha também estava repetindo, daí eu percebi que eu estava usando a mesma imagem para os 2 backgrounds. Repare que a Alana deixou 2 imagens em cada coluna: uma com faixinha no final e a do lado sem faixa. A que está sem faixa, vc usa no background 2 e a que está com faixa, no background 1.

      A minha também não estava encaixando no layout, pois a faixa não estava aparecendo.
      Eu resolvi da seguinte forma:
      A imagem que eu escolhi para o background 1, foi a azul, da segunda coluna. Entrei no site http://imageshack.us/ e editei o tamanho da foto. Assim, na hora de gerar a URL, eu escolhi o tamanho 800x600. Ou seja, diminui a extensão pra faixinha aparecer no menu.

      Mas vc pode fazer isso em qualquer site que já use. O importante é redimensionar a imagem de forma que ela fique legal no layout.
      Outra coisa que eu fiz, foi mudar os caracteres do código que a Alana passou, mudando a Altura do 1º background, alterando o valor do código bem nessa parte aqui:

      partebody, html {
      height: 300px; /** Altura do 1º background **/

      Coloquei 600 no lugar de 300.

      Depois tive que fazer como ela sugeriu, mudando o HTML para o menu ficar alinhado com a faixa. Daí, é só seguir a última parte do tutorial. Espero ter te ajudado! :)


      Excluir
  39. Esse tutorial me ajudou muito! Tôo começando no blog agr! Valeeu!

    ResponderExcluir
  40. Mas como faz pra personalizar esse menu? Tipo sombreamento, fonte, cor...

    ResponderExcluir
  41. Você é demais! O seu blog é show! As artes dão um show em relação a sites "profissionais"! Forte abraço.

    ResponderExcluir
  42. Quando estou fazendo um novo Layout, os seus tutorias são os que eu mais uso, eu simplesmente amo o seu blog
    http://emmeumundodiferente.blogspot.com.br/

    ResponderExcluir
  43. Linda.. eu simplesmente adorei esse post, só que nao to conseguindo colocar as paginas no lugar correto :(
    pesquisei o cod que tu deu, mas nao apareceu. Apareceu um parecido sem o {
    ai eu acrescentei o cod que deu e nem assim. O que eu faço ??

    http://blog-da-zuca.blogspot.com.br

    ResponderExcluir
  44. Perfeito usar no lay de doação

    ResponderExcluir
  45. Achei muito bom mas como se faz para criar um menu? queria uma resposta :(

    ResponderExcluir
  46. Oi, eu gostaria de saber como centralizar as tags que ficam no menu por favor me ajuda *-*
    http://poderoso-tempo.blogspot.com.br/

    ResponderExcluir
  47. Não consegui encontrar o " .tabs-inner { "
    http://blog-de-um-otaku.blogspot.com.br/

    ResponderExcluir
  48. Não consegui encontrar o ".tabs-inner { " me ajuda please!
    http://blog-de-um-otaku.blogspot.com.br/

    ResponderExcluir
  49. Eu não mexo com blog's e tals estou começando agora e procurei por " body { " mas está "falando" que não achou nada. Você poderia me falar qual é o problema ?

    ResponderExcluir
  50. O meu,a faixinha não aparece :( o que fazer?

    ResponderExcluir
  51. Seu blog é muito perfeito e está sendo muito útil para mim!
    É a primeira vez que personalizo um blog e encontrei muita coisa aqui que foi muito lindo para o meu blog!!
    Queria saber de vc se eu colocar um background no rodapé (footer) dará certo usando esse código?
    e onde eu colocaria o código ou trocar?
    Igual está aqui em baixo no seu blog? onde vc colocaou as fotos do instagram,fan page e twitter?
    Queria personalizar essa área do blog!!
    Me dá uma ajudinha!! :)
    Feliz Natal e lindo ano novo!! boas festas!!
    bjos

    ResponderExcluir
  52. Olá Anny, primeiramente quero dizer que amei o seu blog, é muito lindo.
    Eu adorei o tutorial mas não consegui colocar no meu blog, mas achei o último background tão lindo que salvei e coloquei no meu blog (coloquei os créditos para o seu blog no rodapé), espero que não se importe.
    Se quiser visitar meu blog, o endereço é www.corpsequeen.blogspot.com
    Beijos.

    ResponderExcluir
  53. euuu amei a dica,até usei no meu blog hihi :),super diferente,eu sempre achava que era mais complicado isso rsrs,amei seu blog estou seguindo,poderia seguir de volta e indicar? estou recomeçando,por favor,obrigada aguardo sua visita!
    larissapradodesousa.blogspot.com

    ResponderExcluir
  54. não consegui !! Acho q fiz algo de errado aqui .--.
    Alguem me ajuda Please ??

    ResponderExcluir
  55. Adorei *o*,Estou seguindo... segue de volta? *-*
    http://confde2adolescentes.blogspot.com.br/

    ResponderExcluir
  56. Quando coloca o cabeçalho ele fica pra baixo em cima do menu, eu fiz certinho o cabeçalho da mesma altura como você disse, mas quando coloca fica lá em baixo me ajuda por favor?!

    ResponderExcluir
  57. Nossa super fácil, Amei!
    Obrigada e parabéns *--*

    ResponderExcluir
  58. o meu nao tem cor de fundo das guias oq eu faço

    ResponderExcluir
  59. fiz tudo certinho mas nao fica , a faixa nao parece

    ResponderExcluir
  60. bom o que eu queria saber mesmo é como se fazz o menu, não sei como deixar as com inicio, menu, sobre, etc
    queria muito saber como se faz isso
    comecei a pouco tempo meu blog

    ResponderExcluir
  61. Nessa parte: "Se o menu não ficar posicionado em cima da faixinha, você terá que entrar no seu HTML e procurar por .tabs-inner {" Não deu certo porque não apareceu .tabs-inner { , vou ter que mudar o template? :/

    ResponderExcluir
  62. n consegui, não achei o body nos códigos

    ResponderExcluir
  63. Dá pra qualquer modelo?qual vc usa?

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.