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

08:38

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 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







Você pode gostar também

10 comentários

  1. 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. 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. Adorei Rêh! Vou tentar fazer no meu,obrigada pela dica...Beijão <3

    Blog: garotarudeduas.blogspot.com

    ResponderExcluir
    Respostas
    1. Tenta, depois me diz como ficou!
      Bjus Monik ;-*

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

    ResponderExcluir
  4. 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. 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. 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. 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

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda