Tutorial: Personalizar Cabeçalho ocupando toda a largura do blog

sexta-feira, fevereiro 13, 2015 22 Comentários A+ a-



Hey galerinha, neste tutorial irei mostrar para vocês como personalizar o cabeçalho do blog de vocês, ocupando toda a largura, com e sem fundo.

Esta é a largura do blog.
Para personalizar o seu blog a imagem deve ter 1920 x 500 pixels. Este tamanho pode aumentar ou diminuir depende do seu blog, mas creio que irá funcionar. Após personalizar a imagem como quer, você deve fazer upload dela, já vou avisando para não fazer upload em um blog de teste, pois ele corta a imagem, e não deixa ela no tamanho original. Ah, e no seu cabeçalho é melhor que já deixe o nome do seu blog, ou não irá funcionar.

Eu usei este site AQUI para fazer o upload da minha imagem. Agora com o cabeçalho que você quer pronto, o que resta agora é colocar no blog.


Tem duas maneiras de fazer isso: 
1. Postar o cabeçalho, mas ficar sem plano de fundo.
2º Postar o cabeçalho e ficar com o plano de fundo.

Então vamos lá.

Cabeçalho sem plano de fundo.
Já vou avisando que sua imagem não deve ter mais de 300 kb, se tiver mais que isso não tem como, então você deve diminuir o tamanho da imagem, geralmente eu faço isso usando o photoshop. Na hora de salvar a imagem, ele te mostra o tamanho dela, ai você pode aumentar ou diminuir. 

Você deve ter o seu cabeçalho pronto, e uma imagem transparente, isso mesmo sem nada! Este transparente deve ter as mesmas medidas que o cabeçalho que você fez.

Com a imagem transparente, você irá em Layout > Cabeçalho > Fazer upload da imagem transparente. 
Marque a opção "Em vez de título e descrição".
Salve.

Feito isso, agora você irá em Modelo>Personalizar>Imagem de fundo > Carregue o cabeçalho que você quer que apareça, o que você personalizou, e marque a opção Não dividir em blocos quando terminar de carregar.

Prontinho, seu cabeçalho sem plano de fundo irá funcionar!


Cabeçalho com plano de fundo
Agora com o plano de fundo, assim como no anterior você deve ter duas imagens, a transparente, e a com imagens, brushes e outras coisas que você queira. Lembrando que a transparente deve ter as mesmas medidas que o cabeçalho que você quer.

Agora para colocar o cabeçalho no blog vá em Modelo > Editar HTML > Clique dentro da caixa do HTML e aperte Ctrl+F. Na caixinha de pesquisa que aparecer, pesquise pelo seguinte código:

body {

Assim que pesquisar, você vai encontrar o seguinte código:

body {
font: $(body.font);

color: $(body.text.color);

background: $(body.background);
}

Apague o código e substitua por este:

body, html {
height: 400px;

margin: 0;

padding: 0; }

body {

background: url("URL do cabeçalho") no-repeat; }
html {
background: url("URL do background") repeat; }


Preste bastante atenção agora, onde está escrito URL do cabeçalho você vai colocar o URL (link) do cabeçalho que você hospedou em algum site.
E no em URL do background você vai colocar o link da imagem de fundo que você quer.


Depois de ter feito tudo isso, e salvar, provavelmente o seu cabeçalho será tampado pelo blog, não vai ficar aquele espaço dele, não é mesmo? Então, é agora que você irá usar a imagem transparente do seu cabeçalho.

Vá em Layout > Cabeçalho > Upload de Imagem > Carregue a imagem transparente com as mesmas medidas do seu cabeçalho, e não esqueça de marcar a opção "Em vez de título e descrição" e salve.

Prontinho! Agora seu cabeçalho está funcionando perfeitamente. Qualquer dúvida deixem nos comentários!!


Tenho 21 anos, sagitariana e apaixonada por livros. Atualmente estou cursando Design Gráfico na UFG. Meus Hobbies são escrever, ler, ver Doramas, animes, filmes e séries. Gosto muito de filmes e séries de terror, mas em questão de livros e mangás eu prefiro os de romances. Em 2016 publiquei meu conto "Lilith - A Princesa das Trevas" na antologia Demontale e fechei contrato com a Young Editorial para publicar o meu livro "Porcelana: Rubrum Luna"

O animal que me representa é o lobo.




22 comentários

Escreva um comentários
Marina Agostini
EQUIPE GEEK
13 fevereiro, 2015 Deletar

Me ajudou muuuuito, Gessica! <3
Beijos

Responder
avatar
Géssica Marques
EQUIPE GEEK
14 fevereiro, 2015 Deletar

Que bom que ajudou Marina! *----*
Tentarei postar mais tutoriais aqui!!!
Beeijos!

Responder
avatar
Marcela Alessandra
EQUIPE GEEK
31 janeiro, 2016 Deletar

Como você fez esse menu de categorias ao lado? Amei *-*
já vi muitos videos, postagens de como fazer, mas fica muito complicado pra mim pois não tenho conhecimento em PhotoShop! Você poderia ensinar?
meu blog é http://alwaysdelicate.blogspot.com.br/ Obrigada!

Responder
avatar
Géssica Marques
EQUIPE GEEK
31 janeiro, 2016 Deletar

Oi Marcela.
É uma boa ideia, vou se programa algo.

Beijinhos.

Responder
avatar
Candyu R&S
EQUIPE GEEK
13 abril, 2016 Deletar

Oi linda c:
Eu estou tendo um robleminha aqui! Estou a começar a fazer um blogue a um bom tempo, e agora, não está dando certo!
O fundo fica tapando o cabeçalho!
Dá para resolver ? :c
Dá uma passadinha para ver o que está se passando, e já agora Obrigada pela atenão!
http://minimundosoutrosjogos.blogspot.pt/ < Link do blogue

Responder
avatar
Géssica Marques
EQUIPE GEEK
14 abril, 2016 Deletar

Olá!
Você colocou as imagens na ordem que eu coloquei no tutorial?
Eu não tive nenhum problema... =/
Não sei o que deu errado, assim, não sei como posso resolver, sinto muito.

Beijinhos!

Responder
avatar
Rodrigo Pereira
EQUIPE GEEK
02 junho, 2016 Deletar

Bom dia ! Gostaria de saber como vc criou uma imagem transparente.
Grato pela ajuda.

Responder
avatar
Géssica Marques
EQUIPE GEEK
02 junho, 2016 Deletar

É no Photoshop.
Ao criar um novo arquivo ele pergunta como você quer o fundo: branco ou transparente. Ai você coloca transparente.

Responder
avatar
Da redação
EQUIPE GEEK
10 junho, 2016 Deletar

Olá! Eu adquiri um template já pronto, e pelo personalizar, aparece que a imagem de plano de fundo não é aplicável a este modelo. Tem como eu alterar pelo editar do HTML? Obrigado

Responder
avatar
Géssica Marques
EQUIPE GEEK
11 junho, 2016 Deletar

Ixi...
Aí eu já não sei, teria de procurar outros tutoriais na net pra ver se tem como.
Talvez se você procurar como baixar a sidebar e o local onde fica as postagens, talvez dê.
Espero ter ajudado.

Responder
avatar
Alexia Valentim
EQUIPE GEEK
29 outubro, 2016 Deletar

OMG, você é a melhor, com certeza!!! Muito, muito obrigada mesmo! De todos os jeitos que pesquisei, somente o teu site entendeu a minha busca doida rsrsrs, Enfim, me judou muitíssimo *-----*

Responder
avatar
Géssica Marques
EQUIPE GEEK
29 outubro, 2016 Deletar

Oieee!
Ai que booom que ajudou hehehehe!

Responder
avatar
OFC 131
EQUIPE GEEK
08 novembro, 2016 Deletar

nao consegui se eu criei a imagem do computador onde acho o link, blog napontadalingua131.blogspot.com

Responder
avatar
Géssica Marques
EQUIPE GEEK
08 novembro, 2016 Deletar

Oi?
Não entendi a sua pergunta.

Responder
avatar
Maria Luísa
EQUIPE GEEK
21 dezembro, 2016 Deletar

Oi Géssica! Já fazia um tempinho que eu tentava fazer isso, e só depois do seu tutorial eu consegui, deu super certo! Muito obrigada! <3

Responder
avatar
Géssica Marques
EQUIPE GEEK
21 dezembro, 2016 Deletar

Aeee!
Que boom que deu certo!

Responder
avatar
Carlos Alberto
EQUIPE GEEK
02 janeiro, 2017 Deletar

Ajudou , valeu mesmo

Responder
avatar
Rogerio Rodrigues
EQUIPE GEEK
20 abril, 2017 Deletar

Boa dica Gessica mas, uma imagem No cabecalho elimina sua H1 que eh a mais importante para Seo. Se vc usa Seoquake, clicando em diagnostico vc vai notar isso. Tenho um Blog e nao uso foto no cabesalho por isso procuro uma maneira de colocar uma himagem la sem afetar meu Seo me responde se descubrir alguma coisa por favor obrigado!

Responder
avatar
Géssica Marques
EQUIPE GEEK
20 abril, 2017 Deletar

Olá.
Infelizmente não sei como resolver esse problema

Responder
avatar
maicon sempre
EQUIPE GEEK
30 abril, 2017 Deletar

Muito bom o post, visitem meu blog http://doctormrp.blogspot.com.br
Varias dicas para gerar trafego organico no facebook e muito mmais

Responder
avatar

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.