Menu no cabeçalho


10 maio 2012

Tumblr_m0ys7ojx4l1r292xjo1_500_large

Hoje em dia vários blogs já sabem como colocar o menu normal do blogger dentro do header, vários também já ensinaram, dente eles o Trechy Teen, Spázio DM e muitos outros. Mas mesmo assim eu resolvi fazer um tutorial explicando o código que eu usei, que é super simples e fácil para ser personalizado! Eu gosto dele porque da uma aparência mais profissional ao blog, sem precisar daquele menu mapeado sem efeito algum, eu já usei e não aprovei, acho muito sem graça hahahaha :b Bom, vamos ao tutorial?

Primeiro de tudo, você precisa excluir seu cabeçalho e colocá-lo pelo html. Não se assuste, não é nada complicado, basta seguir os passos abaixo:

Já no seu HTML, dê um CTRL + F e procure por:   .content-inner {   Quando achar, apague todo o código que o acompanha, e cole o novo:


.content-inner {
   background: url(COLE AQUI A URL DO SEU CABEÇALHO/HEADER) no-repeat;
  background-position: ;
  background-color: ;
}

Depois procure por: .Header .titlewrapper,   quando achar, você vai colocar o seguinte:  margin-top: +160px; Vá editando o número em negrito até alinhar seu header com o resto do blog, nada complicado.


Depois de ter feito isso, vamos colocar o menu no cabeçalho, para fazer isso, siga os passos abaixo:
Primeiro de tudo, vá no designer do modelo -> Avançado -> Plano de fundo das guias -> Selecione a opção de transparência e salve.

Depois vá no seu HTML, dê um CTRL + F e procure por: /* Tabs quando achar cole o seguinte trecho antes de fechar a chavinha {
margin-left:120px;
margin-top:120px;

Vá editando os valores até encontrar a posição do menu que mais lhe agrade, nada muito complicado. Depois é só visualizar e ver se ficou tudo beleza, daí salve e curta seu menu personalizado :D

13 comentários:

  1. Ótimo tuto :)
    Flor qual indicação?

    bjãoo

    ResponderExcluir
  2. Nossa eu sempre tentava com os outros códigos e nunca dava,agora deu a Plum muiito obrigada princesa ♥
    Tava atrás disse a séculos kkk
    Beijos da Duda
    www.plushbomb.tk

    ResponderExcluir
  3. Te linkei!
    (:
    senhorita-insana.blogspot.com

    ResponderExcluir
  4. Nossa, ajudou mto valeu msm
    BayRawr- - - Sweet-girls-sg.blogspot.com

    ResponderExcluir
  5. Adorei as dicas, e teu layout ta liiindo, parabéns!
    www.espacegirl.blogspot.com

    ResponderExcluir
  6. Adorei seu blog !
    Tem sorteio no meu blog, participa ! Vale apena. Beeeijos e sucesso ;*

    http://ladonerdl.blogspot.com.br/2012/05/sorteio-pra-voce.html

    ResponderExcluir
  7. Mega ajudou o seu tutorial flor! Obrigada mesmo ^^
    http://garotascity.blogspot.com.br/

    ResponderExcluir
  8. meeeeeeeeo ameii super o blog , ja seguindo segue la o meu ?
    http://www.is-candy-life.blogspot.com

    ResponderExcluir
  9. Ótima a dica, super simples o tutorial ^^
    http://themudancas.tk/

    ResponderExcluir
  10. curti muito esse tuto, acho que farei no meu próximo lay. Mas eu queria saber como faz pra colocar essa toolbar preta igual a sua, a minha é do site wibiya, mas n curto muito. (=

    http://monaenrolada.blogspot.com.br/

    ResponderExcluir
  11. como faço pra colocar as letras pra baixo ???

    http://blog-garotadescolada.blogspot.com/

    ResponderExcluir
  12. nossa obg flor ! sabe a parte das tabs ? então arruma os links e eu não conseguia arrumar eles tipo centralizar ! 0bg amei mesmo s2
    guidymania.blogspot.com

    ResponderExcluir

Todos os comentários serão respondidos. Obrigada e volte sempre! ✌ ♥