27 abril 2014

Posted at  12:02  |  in  

Cabeçalho em toda a largura do blog



O motivo do sumiço + Cabeçalho em toda a largura do blog

27/06/2012

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)

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! 


Para deixar o fundo cinza no resto do blog -como aqui no GI- vá em Design >> Designer do Modelo >> Avançado >> Planos de fundo e na caixinha "Plano de fundo externo" coloque a cor que desejar.

2ª forma: Pelo HTML
1°) Vá em modelo > Editar 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

Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comentários:

About-Privacy Policy-Contact us
Copyright © 2013 Testes para Blogs. Blogger Template by Bloggertheme9
Published..Blogger Templates. Powered by Blogger.
back to top