6.6.12

Menu dentro do cabeçalho


Olá. No tutorial você ira aprender a colocar o menu do blog dentro do cabeçalho, similar ao da foto abaixo. Antes de iniciar baixe uma cópia completa do seu template, caso algo de errado é só recoloca-lo. Apenas clique em salvar quando tudo estiver no seu devido lugar. Foto.



Para ver o tutorial inteiro clique em leia mais.

Antes de iniciar faça uma imagem de cabeçalho com o tamanho de todo o seu blog. Não se esqueça de deixar o lugar do menu desenhado.
Hospeda a imagem do cabeçalho, aconselho e uso oImageShack.

Abra a página inicial do blogger - clique na setinha - modelo -  Editar HTML - Prosseguir.
Aperte Ctrl F e procure por:

content-inner {

Você encontrar-a algo mais ou menos assim:

.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}
Apague tudo e cole isso no lugar.

.content-inner {
   background: url(AQUI O URL DO SEU CABEÇALHO) no-repeat;
  background-position: ;
  background-color: ;
  padding-left: 0px;
}

Coloque no lugar indicado o url do seu cabeçalho. Clique em visualizar. Seu cabeçalho estará desalinhado, para colocar do lugar certinho é necessários fazer algumas configurações. Um pouco abaixo deste código encontre: .header-inner .Header .titlewrapper
abaixo de padding-right: cole o seguinte código, antes de fechar a chave:

margin-top: 10px;

Para alinhar o cabeçalho é só alterar a quantidade de px de acordo com sua necessidade. Alterou? Visualize, se estiver tudo certinho, clique em salvar.
 Feche esta ala e logo em seguida clique em PERSONALIZAR.
Vá em "Design", "Designer do modelo", "Avançado" e finalmente em "Plano de fundo das guias". Deixe as duas transparentes.
Agora clique em "Texto das guias" e escolha as cores do link do menu. O primeiro é o link normal, o segundo é o efeito hover.

Prontinho!.Visualize se estiver tudo certo é só salvar.
Se reblogar de os devidos créditos. Beijos

4 comentários:

  1. Tentei colocar uma vez lá no blog mas não deu certo, vou tentar com o seu tutorial, espero que agora eu consiga. Amei seu cantinho.
    Beijos Amanda.

    ResponderExcluir
  2. Adorei! Ficou perfeito no meu blog! Obrigadinha! =3

    ResponderExcluir
  3. Querida, adorei, estava procurando isso...mas o menu, ja deixo com os escritos, ou so o menu vazio? Bjoo

    ResponderExcluir
  4. Oi Cibele tudo bem?
    Então deixe a imagem que você fez SEM nada escrito. Quando você terminar de fazer todo o procedimento os "escritos" serão o próprio menu do blogger.

    Caso você queira fazer o menu desta forma (já com os escritos), até tem jeito, porém o procedimento é de outra maneira.

    Entendeu? ^^

    ResponderExcluir

* Primeiramente muito obrigada pela visita.
* Volte sempre que puder, ficarei muito feliz.
* Seja educado (a), comentários ofensivos não serão aceitos.
* Críticas construtivas, sugestões e elogios são bem vindos.
* Se pegar alguma coisa, credite sempre.

Página Anterior Próxima Página Home
Copyright © Blog da Ka |
Design by Karina Karoline | Tecnologia do Blogger
    Twitter Facebook Google + YouTube