27 abril 2014


É 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.

http://goimagines.blogspot.com.br/2013/03/menu-dentro-de-uma-faixa.html
Reações:

0 comentários:

Postar um comentário