Menu dentro de uma faixa

  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 :*