Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

29 março 2007

Personalizar cabeçalho (Header)

Obs: Todos os tutoriais apresentados foram baseados no template Mínima, do Blogger.

Modificar a imagem do topo novo blogger

Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira é através do painel do Blogger:

1- Vá em Layout e clique em Editar no espaço que corresponde ao cabeçalho:


2- Na janela que se abre, clique em Arquivo para buscar uma imagem no seu computador e depois escolha se deseja que a imagem apareça por trás do título ou descrição ou se a imagem deve substituir o título.
Note que para que a imagem fique centralizada, ela deve obedecer o espaço destinado ao cabeçalho. No template Mínima, sem modificações, este´espaço é de 660px de largura. Se você usa um template modificado, certifique-se da largura e altura de #header-wrapper, para dimensionar sua imagem.

Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure #header-wrapper:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Você pode alterar a  largura (660px) para mais ou para menos e estipular uma altura para o cabeçalho, acrescentando height, desta maneira:

#header-wrapper {
  width:660px;
  height: 120px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Hospede sua imagem que deseja colocar no cabeçalho em algum site (ImageShack, Photobucket, TinyPic,etc) e copie o link da imagem.  O link deve ser colocado em background, como abaixo:

#header-wrapper {
  width:660px;
  height: 120px;
  background: url(link da imagem)  no-repeat top center.

  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


O trecho em verde determina se a imagem se repetirá ou não. O comportamento da imagem pode ser:

no-repeat - a imagem não se repete
repeat - a imagem se repete tanto na horizontal quanto na vertical.
repeat-x - a imagem se repete horizontalmente
repeat-y - a imagem se repete na vertical

O trecho em vermelho determina a posição da imagem no cabeçalho, que pode ser:

top left - a imagem aparece no topo à esquerda
top center - a imagem aparece no topo ao centro
top right - a imagem aparece no topo à direita

bottom left - a imagem aparece na base, à esquerda
bottom center - a imagem aparece na base ao centro
bottom right - a imagem aparece na base à direita.


Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;

Onde  1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.

Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;

Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;

Borda à direita da imagem:
border-right: 1px solid #000000;

Borda na base da imagem:
border-bottom:1px solid #000000;

Lembrando que, para colocar borda nos quatro cantos da imagem, basta colocar:
border:1 px solid #000000;

Tipos de borda:

dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma

Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(link da imagem) no-repeat top left;

onde #FFFFFF é a cor do fundo, e top left é o posicionamento da imagem (à esquerda, no topo).

  • Para que o navegador Internet Explore interprete corretamente o código, é preciso sempre dar um bom espaço entre o endereço da imagem e o comando que vem depois:

Background: url(endereço da imagem) __ no-repeat;

O traço representa apenas o espaço necessário entre a url e no-repeat.

Colocar outro elemento no topo da página

Para dividir o cabeçalho com outro elemento (Feed, Banner, etc) é necessário notar a largura total de #Header-Wrapper e a soma dos elementos contidos nele não podem ultrapassar este valor.

Ex:
#header-wrapper{
width: 800px;}

#header{
width: 350px;
float: left; } (flutua à esquerda dentro de Header-Wrapper)

#NovaDiv{
width: 450px;
float: right;} (flutua à direita dentro de Header-Wrapper)

Não se esqueça de acrescentar no HTML a nova DIV, antes do fechamento de header-wrapper, assim:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Cabeçalho)' type='Header'/>
</b:section>

<div id='NovaDiv'><b:section class='novadiv' id='novaid' maxwidgets='1' showaddelement='yes'></div>
</div>

Como retirar o cabeçalho

Procure por:
<b:widget id='Header1' locked='true' title='Novo Templates (Cabeçalho)' type='Header'/>
</b:section>
</div>

Troque true por false e será possível retirar o cabeçalho da página no painel de controle.

Para inserir Elementos de Página no cabeçalho

Procure por
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Onde está 1, troque pelo números de widgets que deseja inserir no cabeçalho e onde está no, substitua por yes.



Este post foi alterado em julho/2008
Este post foi alterado em set/2008

Artigos Relacionados

67 comentários:

Unknown disse...

Ola, adorei esse blog!!!É tudo que eu precisava.
Sabe o templateI que tem uns ursinhos costurando,escrito meu cantinho?será que seria pedir muito pra que você colocasse no lugar do meu cantinho,o nome do meu blog?
Não entendo nadinha de programas de imagens,e queria muito um template assim
Abraços
Cintia

Anônimo disse...

Parabens....Um blog sensacional e de muito bom gosto.

www.mundosacana.blogspot.com

Chasey Niccoll disse...

Olá, seu blog é perfeito. O que digitei na busca era exatamente o nome do seu blog. Foi show!!! Mas, eu gostaria de saber se vc tem um código para copiar e colar "categorias". Meu ex-blog tinha e eu necessito disso para meu blog recomeçar. Caso vc tenha pode disponisar aí? E tbm dizer onde coloco no novo Blogger? Um abracinho. O meu template peguei daki,buscava o homem aranha de roupa prata ou aluma imagem de novas séries, mas... O cara no beco ,ficou muito massa!!!

Unknown disse...

Oi, Gostei muito do seu blog e gostaria de fazer uma pergunta: tenho tentado trocar meu template por outro da web e sempre aparece um código de erro no novo blogger. Inclusive, tentei os seus e não deu certo. Como faço?
Meu e-mail é: cristinacontiero@globo.com

MamaNunes disse...

Olá Brigadísssssima!!!
Estou me aventurano no blogspot, mas não conseguí entender quase nada até agora. Gosto de criar os meus templates no PSP, usar o Front Page, mas esse blogspot tá me dando uma canseira. Vou usar, com sua licença um template seu "O Rosto", muito lindo mesmo, mas depois gostaria de saber como criar, editar links, imagens... Posso contar com sua ajuda?
Um grande abraço procê!
Meus blogs no zip net:
www.mamanunes1.zip.net
www.asaiajusta.zip.net

NetDownload disse...

Oi! Adorei o seu site, só tenho a lhe agradecer, eu peguei o templateverde e modifiquei todo más seus créditos ainda estão lá. Gostaria também de fazer uma troca de banners (parceria).
Meu site é:
www.netdownload.blogspot.com
Meu e-mail para contato:
net.download@hotmail.com

Espero sua resposta.

Atenciosamente
NetDownload | André

NetDownload disse...

Oi! Gostaria que me desse o banner do seu site, para eu inclui-lo no meu site.

Atenciosamente
NetDownload | André

Apenas Serva... disse...

Olá, voçê é a resposta as minha orações, mas...SOCORRA-ME! Sempre quis mudar o visual dos meus dois blogs...mas..;não entendo nadica de nada...no entanto estou determinada a vencer estes desafios!Poderia, se não fosse lhe pedir muito; ensinar-me por onde devo começar?desde já agradeço muito a sua boa vontade...valeu!

Ariane disse...

Apenas Serva...dá uma olhadinha nos tópicos já colocados, muitos deles ensinam a fazer todo tipo de modificações no template. Conforme vc for tentando as modificações e surgirem dúvidas, vc me pergunta, ok? Abraços!

ADM Todos os Gêneros disse...

oi e minha primeira visita o seu blog mas ele e muito bom Parabens !!! agora eu queria por favor que vc me ajudasse e por que eu estou com um problema num template eu coloco uma imagem e a imagem nao fica centralizada eu queria que vc me ajudasse por favor!! eu criei um blog para testar o template : www.testedetemplatetodososgeneros.blogspot.com por favor olha la !!! meu blog mesmo e www.todososgeneros.blogspot.com
meu e mail e renatodleon@gmail.com por favor me ajuda !!! aguardo e obrigado pela atenção!! ha quando vc olhar la se vc puder me dizer como muda a cor das barras de azul para verde!! acho que depois dessas tantas perguntas vc nao vai nem querer no seu blog!!rsrsrsr ate +

ADM Todos os Gêneros disse...

oi Ariana estou aqui para te agradecer por ter ido la e conferido, só que aquele template nao centraliza a imagens e nao tem como eu pedir a uma menina que vc falou por que eu nao baixei de la foi um amigo que me enviou mas eu queria te fazer um pedido se vc poderia me arrumar um template com 3 colunas de cores claras de preferenia verde e que de para colocar uma imagem no cabeçalho se e assim que e chamado com um design mas bonito eu ia baixar o verde que vc tem mas eu não sei editar se vc puder fazer um exclusivo pro meu blog nos fazemos um trato (parceria) que de para nois dois . mas uma vez obrigado eu nao vou nem esperar pois sei que vc vai me da uma resposta .rsrsr
tchau !! www.todososgeneros.blogspot.com
e-mail : renatodleon@gmail.com

Drica Menezes disse...

olá! acabei de conseguir mudar o template do meu blog e como tinha t feito uma pergunta e já esta tudo certo passei pra t avisar e t mandar o endereço do meu blog pra vc ver se quiser:

http://eumaisdomesmo.blogspot.com/

ainda t pergunto: o q exatamente nao posso mudar no template? pra eu saber e ficar tranquila e nao fazer nada errado, pois teu trabalho é lindo e nao merece ser danificado mesmo! bjao! ah ja olhei o criativas e gostei bastante! qualquer coisa meu email é:
adrimenezes@ibest.com.br

sonia a. mascaro disse...

Olá! Descobri seu blog por indicação de um amigo de Portugal, o Quintarantino do
Not a secret blog. Posso ver que seu blog é muito bom!

Aqui minha dúvida. Não estou conseguindo colocar foto e título do blog no Header, escolhendo a Posição "Por trás de título e descrição". A foto sai estreita, expremida, horrível! Eu preciso então escolher a Posição "Em vez de título e descrição" e colocar o título do blog no Paint. Mesmo assim não está bom. O código do Header do meu modelo relativo a essa parte é este:
#header img {
margin-$startSide: auto;
margin-$endSide: auto;

Antes eu conseguia ter um Header com fotos bem bonitas. Agora até tirei a foto, para tentar encontrar a solução. Desde já agradeço a sua atenção. Até mais, Sonia, São Paulo, Brasil.

sonia a. mascaro disse...

Minha dúvida é a seguinte: como encontro o ENDEREÇO DA IMAGEM, se ela é uma foto que eu mesma tirei?

#header {
margin: 0px;
width:750px;
height:100px;
background: url(ENDEREÇO DA IMAGEM) bottom center;
text-align: left;
color:$pagetitlecolor;
border: 1px solid $bordercolor;

Ariane disse...

Sonia, endereço da imagem se refere ao link que é cedido quando vc hospeda uma imagem. Se você não fez o upload da imagem pelo blogger e hospedou ela no ImageShack, por exemplo, o link direto que eles fornecem é o endereço da imagem, que deve ser copiado e colado onde está indicado no tutorial

sonia a. mascaro disse...

Obrigada pelas informações, Ariane. Vou tentar fazer e depois volto a falar com você. Até mais.

Techfriendnews disse...

Mudo bom, era o que eu estava procurando, vlw pelas dicas!Abraços.

http://pontuakinet.blogspot.com
http://pontuaki.com

Conto com a visita de vcs!

SaToShI disse...

Obrigado de novo! SaToShI

Anônimo disse...

Ola Ariane ... ca estou de novo a pedir a ajuda .
podes dar uma vista de olhos no http://just-agility.blogspot.com

se vires o cabeçalho esta muito mau ...

so que o meu cod html é diferente do que postaste aqui
o meu é :

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

alguma dica !!! a imagem que quero colocar esta no Photobucket , qual o cod que tenho de copiar de la ?

Obrigado mais uma vez

Hugo

jholland disse...

Olá,
De uns tempos p/ cá alguns Blogs tiveram sua imagem (header) alterada. No meu caso, a imagem ficou deslocada p/ a direita. Verificando o código, vi que estava centralizada:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;

O que será que houve ? Vc poderia me ajudar ?

Abraços!

jholland
(http://metamorficus.blogspot.com)

Ariane disse...

jholland, a sua imagem do topo é muito menor que o espaço reservado para colocar uma, por isso acaba sendo redirecionada automaticamnte para a esquerda. Você pode mudar isso direto no codigo, como explica aqui o tutorial

Ygo Magalhães disse...

Bem Ariane!!!
Queria q vc me ensinase a retirar o cabeçalho do blogspot...
aquele azulzinho q fica la em cima!!!
como faço?

Unknown disse...

olá eu tenho um template e tenho problema com a imagem dele,eu gostaria de saber se há algum codigo para fazer com que o cabeçalho seja removivel,pq eu sei que há templates que voce tem a opção de tirar o cabeçalho para colocar uma imagem.
Agradeço desde já!

Marcelo Medeiros Soares disse...

Ariane, você é mesmo fera. Muito boas essa suas dicas e tutoriais.
Eu tenho um bloger (que inclusive o template foi um dos seus modelos) agora eu gostaria de ver se há possibilidade de alterar a fonte do template, como por exemplo Arial. Há essa possibilidade? Se sim, como eu faço?
Gostaria que se possível que você me enviasse um e-mail.

marcelmsoares01@gmail.com

Obrigado.

Marcelo Soares

Anônimo disse...

Olá Ariane(acho lindo esse nome)!
Conheci teu blog hoje e, estou gostando muito das dicas. Sempre tem algo útil pra qualquer blogguer. O mais bacana é que é muito limpo. Sem aquele monte de baboseiras que encontramos na maioria dos blogs. Creio que você faz esse trabalho por prazer mesmo e não visando somente lucros. Acho que quem tem essa intenção cria trabalhos muitíssimo melhores pelo próprio prazer em fazer. Bem, é isso. Grande abraço e continue com o belíssimo trabalho.

Lou H. Mello disse...

Olá

Estou tentando colocar um banner de propaganda no topo do blog e não consegui inserir em nenhum formato que pudesse imaginar. O que está aparecendo lá é só o upload da imagem no cabeçalho, mas preciso fazer o banner funcionar com o link dele, como o da barra lateral. Você pode me ajudar? O resto está dez. http://corinthiansyes.blogspot.com

WindowsXpress disse...

Ótimo post, me ajudou muito.
Vlw!

Little Thin Jones disse...

Olá Ariane.

Adorei esse tutorial, mas tenho uma dúvida. É possível colocar um gif animado no topo do blog?

Obrigado desde já e parabéns pelo excelente trabalho.

Thin.

Anônimo disse...

gostaria de saber se tem como configurar uma maneira de o blogger abrir numa pagina inicial específica, tipo, abrir na página de contatos em vez da pagina inicial padrao.

me ajude!!!
sou novo no blogger e estou montando o meu ainda, é sobre um lugar onde imigrantes italianos se instalaram .. tem muita coisa ainda pra fazer ... por inicio , ainda tenho que escolhe um template bom ..

flw

Series, Download e Entretenimento disse...

Muito Obrigado pelas dicas,
como novo Blogger eu agradeço muito!

Andréa "R" disse...

Olá!
Adorei seus tutoriais,estou á um tempo tentando personalizar o meu blog e não conseguia,acho que com essa tua ajuda vou conseguir...:-)
Obr
O seu trabalho é lindo!!!!

Unknown disse...

oieee.. to com um pequeno probleminha... já mudei imagens do topo de templates 300 vezes e sempre deu certo... mas agora me bateu uma leseira.. como fica o codigo no html para retirar a url da imagem original e coloca-la manualmente... eu apaguei mais quando eu coloco lá nos elementos de pagina ela não aparece.

eu refiz a imagem do topo e tentei coloca-la pela url do site em que eu hospedei, mas o titulo do blog ( nome e descrição ficam aparecendo por cima..

Que confusão, vc poderia ( apesar de não ser uma lampada) me dar uma luz???

:)

Ariane disse...

YaCastro, vc pode colocar a imagem no codigo em #Header, assim:
background: url(suaimagem) no-repeat;

ou direto no painel e para não aparecer o titulo, marque 'ou invés do título e descrição'.

Qualquer dúvida me chama! Abraços

Unknown disse...

valeu ariane, acho que era o template que tava me deixando meio burra!!:) escolhi outro e deu certo como vc falou.

Por falar em template, eu vejo que vc sempre indica varios templates para bloger, pois, na minha caça por um novo template enconortei um site com uns muito lindos.

http://www.suckmylolly.com/

o nome é estranho mais os templates são fofos!!
;-)

Um abraço e obrigada dnovo!

Pep disse...

Olá Ariane, tenho um blog a pouco tempo, e nunca tive problema em colocar imagem no cabeçalho.
Hoje mudei de template, coloquei o Denim.xml, gostei muito dele mas quando coloco a imagem não aparece de forma alguma. Fiz essas coisas que você disse no post, mas também não deu certo.
Será que é problema com esse template?

De qualquer forma Obrigado!

Parabéns pelo site ;)

Ariane disse...

Pepbullish, vc se refere ao template no seu blog de testes? Se for, basta inserir a imagem em #header, retirando de lá a cor que tem no background (#ffebcd) e a cor que tem em h1 (background: #ff4500;). Espero ter ajudado, abraço!

Pep disse...

Querida Ariane,

Muito Obrigado pela resposta, mas não teve jeito, não consegui colocar a imagem.

Na verdade eu quero colocar a imagem no meu blog principal, pepbullish.blogspot.com, no lugar da faixa azul de cima.

Pra testar, eu fiz assim.

No blog proncipal eu deixei o template como o original, o template Denim.xml

No PepTests eu fiz o upload do mesmo template, e fiz as alterações que você recomendou aqui, inclusive as da resposta de hoje; infelizmente também não deu certo.

Será melhor trocar de template ? Gostei tanto desse hehe

Obrigado pela atenção mais uma vez Ariane, mais Sucesso pra Ti :D

Pep

Ariane disse...

Pep, não entendo pq vc não conseguiu...apareceu alguma mensagem de erro? No blog principal está assim:

#header {
width: 975px;
margin: 0 auto;
background-color: #003366;
border: 1px solid #003366;
color: #ffffff;
padding: 0;
font: normal normal 189% Trebuchet, Trebuchet MS, Arial, sans-serif;
}
Basta hospedar sua imagem em algum site, pegar o link direto e substituir, onde está background-color, assim:

background: url(link da imagem) no-repeat top left;

O ideal é que a medida da imagem não ultrapasse a medida do header, que é de 975px de largura.

Roberto Luiz disse...

Puxa... bacana o post... ajuda mesmo...

Fui lendo e fazendo e deu tudo certo, coloquei a imagem, ajustei onde queria, mas o meu título do blog continuava lá... então fui "lá embaixo" e troquei "true" por "false" e, de fato, no painel de controle apareceu a opção para "Excluir" o cabeçalho... e fui lá e mandei ver... só que daí tudo sumiu, inclusive a imagem não carrega mais... as alterações continuam lá no HTML e inclusive o link da imagem... agora que lascou preciso de ajuda pra resolver... fiz backup do meu template e restauro se precisar, mas o que eu queria mesmo é aprender a resolver...

Você pode me ajudar?

Meu blog:
http://robertoke.blogspot.com/

Abraços e parabéns!

Ps.: puxa... faz mais de um ano que esta mensagem tá aqui no teu blog... bacana né? "knowledge are timeless"..

Ariane disse...

Roberto, vc pode voltar a deixar como estava antes (de retirar o cabeçalho) e para que o titulo não apareça, procure #header h1 no código do template e acrescente display: none; ficando assim:
#header h1{
display: none;}

faça o mesmo com a descrição.

Douglas disse...

tipo fui colocar uma imagem
no cabeçalho do meu blog
so q ficou muito grande como eu faço
pra saber o tamanho da parte do cabeçalho
pra mim salva a imagem do tamnho certo?

Isleno disse...

oi, eu gosto muito do seu blog, vivo aqui esses ultimos dias, eu to montando um blog (meu primeiro) e há alguns dias estou procurando como tirar o cabeçalho, achei um metodo de trocar pelo widgets mas no template que deu certo aqui ele não pega pois o cabecalho do template já eh com imagem... a imagem que é trocada fica de outra posição, por favor, se possivel me ajude
não consigo tirar o nome de cima da imagem
qualquer coisa que faço sempre aparece um bug chato ou algo pra me atrapalhar
se vc puder me ajudar me add no msn
xx_isleno_xx@hotmail ou responde por aqui mesmo
obrigado

Anônimo disse...

Olá, será que você poderia me ajudar? Coloquei meu blog todo em fundo preto, mas as arestas arredondadas das bordas ficam aparecendo em cores mais claras. Sabe como retirálas, ou deixa-las da mesma cor do fundo? E para deixá-las retas? Qualquer imformação será legal!
Ah, seu blog é mesmo muito bom, parabéns!!
Valeu.

Unknown disse...

Olá Ariane, adoro seu blog.. estou sempre aqui "tentando" aprender um pouquinho sobre templates.
Bom minha dúvida é a seguinte tenho um blog e não estou satisfeita com o template, então pesquisei muito e cabei encontrando um que me agradasse... fiz um outro blog para teste e coloquei o template lá... só que preciso mudar a imagem do topo do template, faço tudo como vc explica, só que quando troco a url pela minha imagem (que é a mesma do template, só mudei o texto), vem uma mensagem de erro, que há mais de uma div: HTML1, fiz o que vi aqui tbm que é procurar por todos HTML1 e vou trocando o número da frente... até ficar apenas o 1º como HTML1, fazendo isso sempre surge a página de erro do blogger!!! Será que não é possível trocar a imagem.... queria tanto usar esse template!! O nome do template é: wordpressfun, baixei no site Btemplates. Se vc puder me ajudar agradeceria muito!! Obrigada e Parabéns pelo seu trabalho!! Ingrid.

Ariane disse...

plugados, se vc quer trocar a imagem do garoto, procure por:

.masthead-container {
background:url(http://2.bp.blogspot.com/_qTWVg4q5lCo/SM8YdhaSBMI/AAAAAAAAAv0/v2towwWlwuE/s1600/boy.jpg) no-repeat left top;

basta tirar o endereço da imagem q está aí e colocar a sua.

Anônimo disse...

Ja aviso desde já q ñ li os comentários...

Peço muito sua ajuda pois ja mexi em (creio eu que todos) os margin e paddins de meu template e nada da imagen do cabeçalho fikr de lado a lado como na imagen abaixo, consigo deixar ela no topo e totalmente a direita mas nada do lado eskerdo colar no canto, sempre fik um espaço...

http://img5.imageshack.us/img5/6695/correto.jpg

(OBS.: editei a imagen acima no photoshop)

Meu cabeçalho está assim...

http://img5.imageshack.us/img5/1206/errado.jpg

Poderia me ajudar?
Se quiser mais informação sobre os numeros no HTML do template avisi-me...

Muito obrigado desde já

Mandei essa mesma duvida para UC , DB e TNB quem responder primeiro eu coloco um banner no meu cabeçalho encicando o blog...

Por favor ñ me entendam masl mas é que só falta isso pro meu blog fikr pronto a meu ver...

Anônimo disse...

legalzinho

juan salazar disse...

olá.
o seu blog tem me ajudado muito em todas as alterações que efetuo no meu template. valeu! agora estou com uma dúvida que me persegue a tempo.como faço para colocar uma imagem no cabeçalho que o ocupe todo o topo da página (de ponta a ponta), assim como no seu? se puder me responder eu ficaria muito grato.

abraços,
juan-o-salazar
poeziaeazia.blogspot.com

Ariane disse...

Juan, para que uma imagem no header e ocupe toda a tela, em qualquer resolução, você tem que colocar a imagem no background de Body, assim:

body{
background: url(link da imagem) repeat-x top left;

a imagem se repetirá no topo por todo o espaço, à partir da esquerda. Agora, para incluir outra imagem - no caso aqui do meu blog, a moça no computador - você coloca no background de outer-wrapper, especificando onde deve aparecer. neste caso:

outer-wrapper{
background: url(link da imagem) no-repeat top left;

Neste caso, outer-wrapper não pode ter medida 100%, ok? ou a imagem ficará colada no canto esquerdo, sem nenhum espaçamento.

Bill Tavares disse...
Este comentário foi removido pelo autor.
juan salazar disse...

Ariane,

Grato pela ajuda mas ainda assim não estou conseguindo. Insiro a imagem (com a url de uma imagem locada no picasa web) e a imagem não aparece (ou se aparece fica na mesma largura que o cabeçalho, pois eu quero que a imagem ocupe ponta a ponta da tela - será que devo mudar alguma configuração de largura?). Além do mais, o background do meu blog fica todo branco,sendo que ele é preto.

Desculpa a insistência... mas desde já agradeço a colaboração.

Juan
poeziaeazia.blogspot.com

juan salazar disse...

Ariane,
Estou seguindo suas alterações mas não consigo fazer com que a imagem ocupe ponta a ponta da tela na parte superior. Será algum problema com largura de colunas? Fora que quando insiro a imagem, o background fica branco (sendo que é preto). O que posso fazer? Desculpa te atormentar mas ta dificil de eu conseguir fazer isso.

Abraço,
Juan
poeziaeazia.blogspot.com

juan salazar disse...

Oi Ariane... sou eu de novo.
Então, eu segui suas alterações mas ainda sim não consigo fazer com que a imagem ocupe toda a tela (de ponta a ponta). Ela fica restrita a um espaço um pouco maior que o header.
Será que é algum problema do link da imagem (estou locando a imagem no picasa web), ou algo relacionado a largura das colunas?
Fora que quando altero, o background fica todo branco, sendo que é preto.

Grato desde já pela sua ajuda.
Aprendi várias coisas aqui.

Abraço,
Juan
poeziaeazia.blogspot.com

Ariane disse...

juan, olhei o código fonte do seu template e lá não está nenhum link de imagem, em lugar nenhum. Hospedando a imagem através do painel do blogger vc não conseguirá este efeito, apenas do modo como expliquei.

john o fera disse...

è gostaria de saber como colocar uma imagem gif centralizada no cabeçalho do meu Blog?
o header do meu blog está assim:
#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://crinfocrea.com/images/matrix.gif) no-repeat center $startSide top;
}

#header {
margin: 0;
padding-top: 30px;
padding-$endSide: 280px;
padding-bottom: 30px;
padding-$startSide: 380px;
color: $pagetitlecolor;
background: url(http://crinfocrea.com/images/matrix.gif) no-repeat center bottom $startSide;
}

O QUE FAÇO PRA ESTÁ IMAGEM FICAR BEM CERTINHA! NO MEIO EXATO! THANKYOU

Ariane disse...

john, o código está todo errado para centralizar uma imagem. Primeiro, não tem necessidade de colocar a imagem em header-wrapper e em header, você pode colocar só em um dos dois, se ambos tiverem a mesma largura. Depois, para centralizar as divs, as margins devem ser margin:0 auto;Após o link da imagem está assim: não repetir centralizar abaixo à esquerda...? Para centralizar, basta no-repeat top center;. Para finalizar, #header não está centralizado na margin e está cheio de 'paddings'...
O ideal seria descobri a medida de #header-wrapper (no caso do seu blog pelo que vi é 763px de largura), ter uma imagem de tamanho igual ou maior e colocar assim:
#header-wrapper{
margin:0 auto;
padding: 0 0 0;
background: url(link da imagem) no-repeat top center;

#header{
margin: 0 auto;
padding:0 0 0;

Tenta desta menira depois me conta o resultado, ok?

abraços!

Elis disse...

... Adorei esse blog, ajudou muuuito mesmo. Sou louca por html e só entendo o básicão mesmo. Você deve imaginar o quento me ajudou!

'bjus!!

Guilhermy Marinho disse...

Ola sou do blog huffepuff e que criar uma galeria de imagens mais não sei qual é o procedimento se poder me ajudar agradeço.
Parabéns pelo blog.Sem ele não sei o que seria de mim.
aguardo resposta

Ariane disse...

Huffepuff, que galeria vc gostaria de colocar no blog? existem muitas. aponta o link onde ela está que eu ensino, ok?

Godrick disse...

Óla Ariane tudo bom?
Bom meu problema é o seguinte...
Eu estava tentano colocar no topo do meu blog, imagens aleatoria... eu até consegui, so que o widget que seria no topo, com o java script das imagens aleatoria, pega as propriedades da side-bar, e da padding nele e talz...
eu não sei oq fazer "/

pode me ajuda?

link do blog é: www.agitomusics.blogspot.com

bjos.

Anônimo disse...

Ariane, como eu faço para mudar a fonte do cabeçalho do meu blog?

Eu fui procurar no meu template pelo o Header e vi que ela não tinha esse espaço no código HTML dele.

Obrigada pela a atenção

Anônimo disse...

ola tudo bem como eu crio as paginas mas que elas nao fique na pagina principal

como esse seu

we.skulls@gmail.com

Deh Vipper disse...

Oi Ariane!
Estou criando um blog e estou tendo dificuldades para trocar o cabeçalho. Li todos os comentários e respostas daqui para ver se achava algo, mas parece que ninguem teve o mesmo problema que eu.
O meu blog não tem as informações que vc colocou neste post, na verdade o código dele é dessa maneira abaixo:

http://img9.imageshack.us/img9/8551/header2nfl.jpg

Será que vc poderia me dar uma ajudinha? \o

Igor disse...

Cara tabom sua postagem,mias tenho um problema como tiro o titulo e descriçao do meu blog?

Anônimo disse...

Bacana, mais tentei de tudo que é Jeito pra arrumar uma coisa aqui e não consegui.
É que qualquer Imagem que eu coloco como Banner fica fora dos Padroes no lado, em cima e embaixo o banner nunca consegue ocupar um espaço que fica em branco mesmo que o tamanho da imagem que eu use tem as mesmas dimensoes do Header, sempre tenho essa problema.

Se puder m dar uma Força :

Vou postar aqui o codigo desde #header-wrapper pra você ver e tem algum erro.

#header-wrapper {
height: 175px;
width: 995px;

}
#header-wrapper h1 {
position: center;
top: 0px;
left: 0px;
color: #000000;
margin: 0px;
padding: 0px;
font: normal 0px/100% "Comic Sans MS", Arial, sans-serif;
}
#header-wrapper h1 a,
#header-wrapper h1 a:visited {
color: #000000;
text-decoration: none;
}
#header-wrapper h1 a:hover {
color: #333333;
text-decoration: none;
}
#header-wrapper p {
position: center;
top: 0px;
left: 0px;
color: #333333;
font: 12px Arial, Helvetica, sans-serif;
}
#content-wrapper {
width: 995px;
margin: 0px auto;
position: relative;
}
#main-wrapper {
float: left;
width: 520px;
margin-left: 5px;
padding: 10px 10 10px;
}
#main-wrapper a {
}
#main-wrapper a:hover {
}

____________________________

http://upgamez.blogspot.com/

Por Favor me Ajude!
Depois de Arrumar esse Erro, to Afim de colocar Anuncios do Google, pois é a unica coisa que posso ganhar com um Blog de Down.

Anônimo disse...

Ariane, mais uma dúvida. Como posso por o slide dentro do header, em um lugar específico do header??? Eu acho que só pelo codigo HTML, estou correto??? Por favor me ajude, eu necessito colocar esse slide no header, acesse meu blog: http;//e-mateus.blogspot.com/ e veja no header, um lugar que tem tipo um lembrete com um clip, que nem aqui no seu blog, eu preciso fazer isso, me ajude!!! Espero resposta, pois necessito, por esse slide no lugar específico do header, como faço???

Mateus Rodrigues - Mateus' Blog

Ariane disse...

Mateus dá uma olhada aqui nesse tuto mesmo a parte que fala sobre como colocar um novo elemento no topo da página. Siga as instruções e depois coloque a parte do código html do slide dentro do novo elemento, como um widget HTML/Javascript e vá ajeitando as medidas.