Blog

Tutorial: Como colocar o cabeçalho em toda largura do blogger

www.renatamassa.blogspot.com

Ola meninas e meninos, tudo bem com vocês!
Hoje eu venho com mais um Tutorial para Blogueiras, a algum tempo venho buscando formas de melhor a cara do blog, para isso tenho outros blogs para "testes de layout's" , e vim compartilhar com vocês como colocar o cabeçalho em toda largura do  blogger.

 Observações:

  1. Lembrando que esse tutorial básico apliquei ao modelo Travel editado, ou seja modifiquei vários detalhes no layout, mas a base inicial do blogger é o "Viagem /Travel"
  2. E que nem todos tutorias funcionam em todos os modelos, eu mesmo já testei vários que não deram certo, ate conseguir.

 Continuando... é bem simples,  basta ter um cabeçalho nas dimensões de acordo com seu blog/pc e um background  hospedados. Para quem não sabe onde hospedar,  eu sempre uso o TinyPic.

 Feito isso, vá em DESIGN, depois EDITAR HTML, Dê Contrl+F e procure por:


/* Content ----------------------------------------------- */

 Você encontrara esse código:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

 Abaixo desse "}" cole o seguinte código:
body, html {
height: 400px;
margin: 0;
padding: 0; }

 body {
background: url("LINK DO TEU CABEÇALHO") no-repeat; }

 html {
background: url("LINK DO TEU BG") repeat; }
html body .region-inner {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

 Onde tem  LINK DO TEU CABEÇALHO Substitua pelo link da imagem (cabeçalho hospedado)
Onde tem LINK DO TEU BG  Substitua pelo link do backgroud ou pode usar uma cor definida: Ao invez de "backgroud: url" substitua por "backgroud: #SuaCorAqui".

 Prontinho!
Espero que vocês tenham gostado!
Acompanhe nosso blog, com novas dicas toda semana para blogs e blogueiras!
Creditos Go Imagine





Renata Massa

You Might Also Like

10 comentários

  1. Erica21 dezembro

    Vc só esqueceu de dizer qual modelo de layout q está usando. Esse código q vc passou não serve pra todos os modelos, pq cada template se organiza de formas diferentes. Quem utiliza modelos como o mínima ou o travel isso não vai funfar. E a questão da tela em tamanho total, varia de acordo com a resolução. QUem utiliza 1300 px mais ou menos de width, fica com o blog cortado no pc/note de quem tem resolução 1024, por exemplo. É um bom tutorial, mas tá faltando informação.

    ResponderExcluir
    Respostas
    1. Renata Massa21 dezembro

      Oie Keyko Obrigada pelo comentário sobre a dimensao coloquei uma observaçao. Quando ao modelo do layout, fiz um teste antes no blog de teste para layout e deu certo.
      Outra observaçao que adicionei, que nem todos tutoriais de html dao certo, para todos os modelos, eu mesma provo varios que nao funcionaram... Mas antes de postar aqui eu testo antes ;)
      Obrigada pela visita, foi positiva!
      Bjus e volte mais vezes!

      Excluir
  2. Mônica Carvalho21 dezembro

    Adorei Rêh! Vou tentar fazer no meu,obrigada pela dica...Beijão <3

    Blog: garotarudeduas.blogspot.com

    ResponderExcluir
    Respostas
    1. Renata Massa21 dezembro

      Tenta, depois me diz como ficou!
      Bjus Monik ;-*

      Excluir
  3. Anônimo21 dezembro

    Reh essas dicas de blogueiras estão cada vez melhores! continue assim
    beijokas

    ResponderExcluir
  4. nayhamar21 dezembro

    Muito bom, Rêh! Queria entender melhor de html pra mexer mais no meu blog kkk. Continua com esse tipo de post que vai ajudar muuita gente! beeijos

    ResponderExcluir
  5. Nêssa Beleza26 maio

    Renata, boa tarde! Eu tenho o template bem semelhante ao seu do ThemeXpose, e quero muito saber como você colocou o cabeçalho ocupando toda largura do blog. Tentei realizar o tutorial que você ensinou nesse post. Porém, eu não encontrei os dados informados no HTML. Eu já vi diversos tutoriais na internet, e nenhum funcionou no meu blog. Esse é o meu blog : www.mundoyoung.com.br
    Se puder me ajudar, ficarei muito feliz. Obrigada <3
    Beijoos :*

    ResponderExcluir
    Respostas
    1. Renata Massa27 maio

      Oiee Van, ao inves de /* contant vc vai procurar por /*** Header ***/
      e abaixo dele cole esse codigo:

      body {
      max-width: 100%;
      margin:0px 0px 0px 0px;
      background:url("LINK_HEADER") top center no-repeat;
      }


      html {
      background: url("LINK_BACKGROUND") repeat; }

      Excluir
  6. Nêssa Beleza28 maio

    Oláaa, Renata. Venho através deste comentário agradecer muito pela a sua ajuda. Porque como falei anteriormente, eu realmente procurei muito no Google e não conseguia encontrar nenhum tutorial que funcionasse no meu template, você me ajudou muito.
    Obrigada ❤

    ResponderExcluir
  7. TMJ Traços24 novembro

    Muito Ruim o tutorial

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.

instagram