Image Map

11/05/2012

Tutorial: Juntando cabeçalho com navbar+ Juntando cabeçalho com área das postagens

short mais perfeito ever!
 Bom dia meus pinguinzinhos 
 Tudo bem com vocês? Faz mooointo tempo desde o nosso último tuto, não é mesmo? Por isso voltei com um bem legal pra vocês!
 Os tutos de hoje são bem fáceis e tiram aquela cara de "layout iniciante" do seu blog. Como são dois diferentes, vou explicar separadamente, dizendo quando um acaba e o outro começa.
 Vamos lá?

 O primeiro tuto é o pra juntar o cabeçalho com o topo do blog. Vá em DesignEditar HTML Tecle Crtl+F e procure por /* Header. Vai aparecer mais ou menos isso:
/* Header
----------------------------------------------- */
.header-inner.Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
}
 Selecione todo o código cor-de-rosa e no lugar coloque esse outro código:
.header-inner {
margin-top: -45px;
}

.Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
 Você pode aumentar ou diminuir o número que está em azul (-45px) pra ajustar o cabeçalho do seu modo. Esse lindo tutorial eu vi lá no blog Material Extra.
(layout encomendado que eu ainda não tinha ajustado- rimou bestamente)
 Agora vamos ao segundo tutorial. Esse é pra juntar o cabeçalho ou com o menu ou com a área das postagens, depende do que vem primeiro né, hahaha. Vamos começar. Vá em DesignEditar HTML Tecle Crtl+F e procure por /* Tabs
 Vai aparecer mais ou menos isso:
/* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
 Agora retire o código que está riscado e verde. Agora procure por /* Main
 Vai aparecer mais ou menos isso:
/* Main
----------------------------------------------- */
.main-inner {
padding: $(content.padding) 0;
}
 Acrescente em baixo do código que está cor-de-rosa o seguinte código:
margin-top:-10px;
 Pronto! Se necessário, você pode aumentar ou diminuir o -10, pra ajustar tudo. Esse código eu vi lá no Mury's World. Caso vá reblogar/usar, credite, ok?
 E aí, gostaram e entenderam? Espero que sim. Como sempre, caso alguém tenha alguma dúvida é só falar por comentários! Ah, quase me esqueci, hahaha, uma amiga minha pediu pra eu perguntar se alguma de vocês quer entrar no blog de encomendas free dela! Para mais informações (uii, hahaha) é só acessar o blog dela.
 É isso. Beijinhos com glitter :*

30 comentários:

  1. É super fácil , eu pensava que era difícil. Gostei muito .

    http://modicesdemenina.blogspot.com.br

    ResponderExcluir
    Respostas
    1. É muito fácil mesmo flor ^^
      Bom que gostou!

      Excluir
  2. Divo esse tuto >.<
    Já tinha visto, eu fiz no meu blog, é muito bom!

    #Beijitos~~> 4-Brownies.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Bom que gostou, flor ^^
      É, é meio comum, mas quis postar pra quem ainda não havia visto :>

      Excluir
  3. Esse tutorial é ótimo e super útil! *O* adorei..

    Beijos,
    theplugados.blogspot.com

    ResponderExcluir
  4. Ola linda tudo bem?
    me seque vai
    beijos

    http://menina-de-atitude.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi flor! Da próxima vez que você for comentar tenta dar uma lidinha no blog, ok? Você ganharia muito mais visitas e seguidores se comentasse sobre a postagem!
      Beijinhos :*

      Excluir
  5. Aaaai tutoriais não são pra mim hehe!! Sempre fico perdida!! Já conhece meu blog?? http://www.republica-degarotas.blogspot.com | Se quiser que eu siga aqui, deixe um recadinho lá e me siga! Beijooos

    ResponderExcluir
    Respostas
    1. Sério? Mas esse é bem simples mesmo, hahaha
      Ainda não flor, vou ir lá ver!

      Excluir
  6. Mesmo que fique mais bonito, não gosto.
    Nanda <3
    delicatepinkties.blogspot.com

    ResponderExcluir
  7. adoreeei, tava procurando isso esses dias *-*



    http://fugindodarotina.com

    ResponderExcluir
  8. Eu usava o de postagens/sidebar, e o cabeçalho juntos. Agora, todos os gadgets estão separidinhos (:

    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  9. Muitos procuram por esses tutoriais!Muito bom!
    http://jeitointelect.blogspot.com

    ResponderExcluir
  10. ja conhecia o tutorial é bem util mesmo (:

    http://garotoonerd.blogspot.com.br

    ResponderExcluir
  11. como eu faço para descer um pouco mais o cabeçalho ?

    bjs ,

    http://delicadasederivados.blogspot.com.br

    ResponderExcluir
    Respostas
    1. É só usar o 2º tuto, o de juntar com a área das posatgens/menu ;)
      Beijinhos :*

      Excluir
  12. Super útil!
    http://omeubrilhantemundo.blogspot.com.br/

    ResponderExcluir
  13. Aiii valeu pelo tutu !! me ajudou muitooooo
    OBG! Emilia.
    Já to seguindo seu blog eu amei ele.
    coffemilia.blogspot.com

    ResponderExcluir
    Respostas
    1. Aaah, que bom que ajudou, flor! Disponha :3
      Oown, brigada ><

      Excluir
  14. Me ajudou superrrr Paula! Obrigadaaaa :333 Beiijinhos

    ResponderExcluir
  15. Respostas
    1. Mas aí também depende né flor, você fez o tutorial certinho? Tenta repetir com calma, talvez tenha sido isso!
      E também pode ser o seu modelo, eu uso esse tutorial no Travel.

      Excluir
  16. AMEI LINDA PARABÉNS >> BLOG http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir