Cabeçalho em toda a largura do blog
O motivo do sumiço + Cabeçalho em toda a largura do blog
Acho que vocês sabem, to na 8ª série do fundamental e tá sendo tudo muito corrido. Desde o ano passado faço dois cursos de computação (web designer e operador de computador) e semana passada comecei um curso preparatório para as provas de seleção, como to saindo do fundamental tenho que garantir minha vaga em uma escola de ensino médio, e pra isso tenho que fazer umas provas ~tensas~ Esse cursinho é dois dias por semana, ou seja: tenho 2 cursos na terça (preparatório+webdesigner) um na quarta (operador de pc) e um na quinta (preparatório), então só tenho a segunda e a sexta livres (fora o tempo que tenho antes e depois dos cursos) e ainda tenho que conciliar o blog com trabalhos escolares. Espero que entendam que tá difícil atualizar o blog e que provavelmente ele vai continuar assim meio parado, infelizmente, mas fazer o que né?
Muita gente pediu para eu ensinar como fiz o cabeçalho ocupando toda a largura do blog, e hoje vou revelar o segredo. Na verdade não é um cabeçalho e sim um background (HÁ! por essa você não esperava!)
Há uns tempos atrás eu visitei o Madtown e vi que o cabeçalho ocupava toda a largura, achei lindo e só depois raciocinei que era um background. Me inspirei na ideia e coloquei aqui no blog também! :3 Tava só esperando a Laís postar o tuto primeiro (já que foi ela que inventou seria injusto eu postar antes né?).
É bem simples de fazer e existem duas formas, uma com HTML e outra sem! Go!
Materiais
Obviamente você vai precisar de uma imagem (cabeçalho) pra colocar no background. Recomendo a largura1365px (é a que eu uso) mas pode ser maior. Aqui no meu note dá direitinho! Quanto a altura, 400px tá de bom tamanho.
Você também vai precisar de um cabeçalho transparente, pra que? Porque sem nada no cabeçalho, as postagens e a sidebar vão para cima e vão tapar seu background, então já faça uma imagem transparente de altura um pouquinho maior que o back e coloque no lugar do cabeçalho normal (no gadget do cabeçalho na guia design)
Você também vai precisar de um cabeçalho transparente, pra que? Porque sem nada no cabeçalho, as postagens e a sidebar vão para cima e vão tapar seu background, então já faça uma imagem transparente de altura um pouquinho maior que o back e coloque no lugar do cabeçalho normal (no gadget do cabeçalho na guia design)
1ª forma: Pelo designer do modelo
Essa é a maneira que eu mais recomendo, pois é bem mais prático e fácil do que da outra forma que vou ensinar, mas tem um porém: Só da pra fazer upload de imagens com até 300KB, no meu caso não deu, pois a minha imagem é bem maior. Então se sua imagem tem mais que 300KB tente a outra forma porque essa não dá :(
Após ter feito a imagem vá até: Design >> Designer do Modelo >> Plano de fundo e faça o upload da imagem, deixe na opção "não dividir em blocos" ou "dividir horizontalmente", as duas são boas!
2ª forma: Pelo HTML
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
3°) Substitua o código acima por esse:
body, html {
height: 400px;
margin: 0;
padding: 0; }
body {
background: url("URL do cabeçalho") repeat; }
html {
background: #cor; }
Substitua onde esta escrito "URL do cabeçalho" pela url da imagem e onde está #cor coloque o código da cor que desejar. Lembre-se de mudar a altura (400px) para a altura do seu cabeçalho/back!
http://goimagines.blogspot.com.br/2012/06/o-motivo-do-sumico-cabecalho-em-toda.html
0 comentários: