27 abril 2014

Posted at  11:51  |  in  


É 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

Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comentários:

About-Privacy Policy-Contact us
Copyright © 2013 Testes para Blogs. Blogger Template by Bloggertheme9
Published..Blogger Templates. Powered by Blogger.
back to top