É 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:
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:
body {3°) Apague tudo e coloque no lugar este código:
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
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.
http://goimagines.blogspot.com.br/2013/03/menu-dentro-de-uma-faixa.html
0 comentários: