Menu dentro de faixinha

Resultado da Montagem
Oiie meninas vim trazer o tutorial a pedido da Cássia:
que pediu como colocar menu no blog esse tutorial eu já fiz se quiser ver clique aqui >< e tem menu também de colocar no status do blog para ver clique aqui >< pode olhar qualquer um dos dois qualquer duvida comente se o menu que você quer não for esse mais hoje eu vou ensinar como colocar menu do blog dentro de faixinhas vamos lá?
Bom primeiro você vai em modelo ✖ editar HTML e procure por:

body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);}
✖Apague tudo e cole no lugar:


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; }


No lugar de URL DO BACKGROUND coloque url do 1° coloque a imagem qu etem espaço para ficar o menu e o 2° coloque a imagem que vai ficar como fundo do blog tem algumas imagens aqui:





imagens para o 2° background





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

2° PASSO

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. Espero que tenham gostado e que eu tenha sido útil qualquer duvida comentem beijos.
Fonte: 

Resultado da Montagem

12 comentários:

  1. Legal esse menu,talvéz eu use!

    ResponderExcluir
  2. Adoro ver blogs com o menu dentro de faixas! Ainda não conhecia esse tutorial
    querosabertudo-k.blogspot.com

    ResponderExcluir
  3. Obrigada por fazer o tutorial . Quando eu tiver mais tempo com certeza vou usar !

    ResponderExcluir
  4. Ameii o tutu :3
    Tava pensando em usar, mas nn consegui no meu template :s
    Estou seguindo aqui flor, poderia retribuir? Obg desde já :)
    Beijos & Sucesso!
    http://pll-mania.blogpost.com

    ResponderExcluir
  5. Gostei do tutorial. Bem legal! Devo usar um desses :) hey tem uma tag pra você lá no meu blog :) Dá uma olhadinha lá. Bjss!
    http://apenasonossoblog.blogspot.com.br/

    ResponderExcluir
  6. kk eu sempre fiquei que nem louca por procurar esse tuto e agora que eu achei ja mudei meu lay haha, quem sabe eu use no meu próximo lay =)

    Dá uma passadinha lá no meu blog? e se gostar segue?
    Estou seguindo seu blog (simplesmente amei s2s2)

    beijinhos ^=^

    http://thingsteenoficial.blogspot.com.br

    ResponderExcluir
  7. Vi o mesmo tutorial ,com as mesmas imagens no Go imagine O.o

    ResponderExcluir
  8. Amei seu blog!! Parabéns!!
    o meu é http://vishamiga.blogspot.com.br/

    ResponderExcluir

REGRAS:

✖ Proibido xingar, insultar
✖ Faça criticas construtivas
✖ Siga, Comente e divulgue
✖ Não plagie as postagens, pegar algum post Credite
✖ Comente sobre o assunto do blog, e no final do comentário coloque o link do seu blog, que eu visitarei e seguirei.