Header Vanessa S.
Personalizando o cabeçalho do blog (Header)
Há várias maneiras de personalizar o Header do blog.
Antes de começar o artigo, sugiro que veja também um tutorial em vídeo do canal Tech Tutors:
Vou postar aqui algumas delas.Vejamos:
Alterar a imagem do cabeçalho(Header) diretamente no HTML do template:
O 1º passo é fazer um backup do seu Template para evitar transtornos.
2º passo é criar a sua imagem e hospedá-la em algum sevidor. Se quiser confira esta dica para obter hospedagem de arquivos barata: Cupom Godaddy 85% OFF → Hospedagem de Sites | Domínio | VPS
O tamanho da sua imagem deve ter o mesmo tamanho do header no seu blog.
Entre no painel do Blogger, clique no menu “modelo” em seguida clique no botão “editar html”.
Procure no corpo do HTML do seu blog tag referente ao cabeçalho do seu blog.
No templates mínima, por padrão, a tag referente ao cabeçalho é
#header {
No designer de modelo a tag é
.header-outer {
Não há como informarmos precisamente qual a tag referente ao cabeçalho no designer de modelo de todos os modelos existentes, até porque cada template é diferente um do outro, portanto você terá que tentar localizar e identificar o trecho “header” no seu modelo. Eu recomendo que você tente fazer uma busca usando ctrl+f.
3º passo – Você já tem a sua imagem hospedada, agora copie o endereço (URL) do link da imagem e cole entre os parênteses do código -> background: url(URL DA IMAGEM) top center no-repeat; e cole este código abaixo da referente ao header no seu template.
P.s: no exemplo acima o background indica que a imagem irá se localizar no topo e no centro e que não vai se repetir.
Se você quiser colocar uma imagem menor que o espaço destinado ao cabeçalho e queira colocar uma cor neste espaço, (uma cor que seja diferente da cor do seu plano de fundo, por exemplo), coloque o código referente a cor de sua preferência em background.
Como o exemplo abaixo:
background: #FFFFFF url(URL link) top center no-repeat;
Se você quiser , você também pode inserir uma borda na sua imagem do Cabeçalho.
Se a borda for em torno da imagem toda, use o código border: 1px solid #000000;(coloque o código referente a cor de sua preferência)
Se quiser, consulte Tabela de Cores Html.
Lembrando que você deve ajustar a largura ou altura do header de acordo com as medidas das bordas.
Alterar a imagem do cabeçalho(Header) através do layout:
Entre no painel do Blogger, clique no menu “layout“, clique em “Editar” no elemento “cabeçalho”
Na janela que se abrirá, faça upload da sua imagem, escolha o posicionamento e em seguida clique no botão “salvar”.
(Veja imagem)
Excluir o cabeçalho do blog:
Se você quiser retirar o cabeçalho, acesse o menu “modelo“, entre no modo “editar html” e procure por esta tag:
<b:widget id='Header1' locked='true' title
Onde está escrito locked=’true’ troque por locked=’false’.
Feito isto, vá até o menu Layout ,clique em “Editar” no elemento “cabeçalho”, lá vai aparecer a opção “Excluir“.
Remova e pronto, você já não tem mais o título em header do seu blog.
Oi , nao consigo colocar um novo templante no meu blog ..
ele esta muito simples , sem menu horizontal , nem nada ..
o que fazer ? onde conseguir templantes que realmente dá pra colocar no blogger. agradeceria muito se respondesse . obrigada
Queria saber como mudar o link do cabeçalho??
Ai consegui, vlw se der da uma olhada http://britneytodaysemper.blogspot.com/
Oi Clau… Após ter conseguido inserir as tags para o SEO, o nome do Blog havia voltado como que, instantâneo e com esse tutorial eu consegui "Retirar o nome do cabeçalho"
Brigadim menina!
Olá clau! Gostaria de saber como colocar corretamente uma imagem em flash no cabeçalho do blog… Já tenho a imagem hospedada e seguindo alguns tutoriais que encontrei pela net, o cabeçalho não fica no centro. Tentei encontrar aqui mas não achei, se houver um tutorial seu sobre isso posta o link aí por favor… O Mundoblogger já tá em meu favoritos!!! Sucesso, feliz 2011 e até mais…
Valeu, passei uma eternidade procurando este probleminha,graças seu excelente tutorial conseguir tirar este Gadget muito obrigada.
Dicas super legais, Valew!
Fefa
Em alguns tutoriais eu incluo imagem demonstrativas, mas só incluo qdo dá, qdo tem possibilidade de demonstrar os passos do tutorial. Neste tutorial em questão,não terei como incluir imagens, visto que o que eu expliquei acima, eu tirei como base os testes e procedimentos q eu realizei há um bom tempo atrás.
Obrigada pelo comentário e volte sempre 😉
Oi,
Se vc usar imagens de como era, e como ficou a página.
Talvez facilite pra algumas pessoas entenderem a finalidade do código.
É uma dica, aceita se quiser.
Obrigada pelo post.
Tchauu
Clau,eu queria deixar o meu header grande igual o seu do mundo blogger,jà pesquisei o ìndice mas não encontro!
@Bruno Sajermann:
Vc falou: "quase todos meus comentarios eu tenho que comentar uma segunda vez pedindo a resposta do primeiro"
Por favor né Bruno? eu não sou funcionária do Blogger e nem tenho obrigação de ficar dando consultoria 24h por dia!
Eu não posso ficar aqui 24h do dia me dedicando a responder comentários e principalmente responder somente as suas perguntas…eu tento responder a medida q eu posso e qdo estou disponivel. A maioria das vezes q vc deixa uma pergunta, eu vejo q a sua resposta já está publicada em algum outro tutorial q está disponivel no menu "tutoriais para blogger – indice", seria mais fácil vc fazer uma busca no menu 1º antes de deixar outro comentário "exigindo" uma resposta do 1º não acha?
Se vc não percebeu, eu tenho vida "pós blog"! Eu blogo pelo simples prazer de blogar e poder ajudar as pessoas, e esse trabalho q faço aqui é gratuito, apenas por prazer mesmo..mas não tenho obrigação nenhuma em prestar consultoria. Os tutoriais q publico aqui são bem explicativos,procuro utilizar uma linguagem simples e clara para melhor entendimento dos leitores. Se respondo as perguntas é pelo prazer de poder ajudar,mas nem tudo eu tenho como ajudar, ou posso ajudar, ou estou disponivel para ajudar, entendeu?
Sem mais.
Desculpas Claú, nunca acho, mas sempre procuro, em relação aos comentarios, deve haver algum problema, pois quase todos meus comentarios eu tenho que comentar uma segunda vez pedindo a resposta do primeiro….
Ou vc anda muito ocupada, ou vc ja se enjuou de minhas perguntas ou tem problemas nos comentarios
=P
Mas obrigado!
@Bruno Sajermann:
Eu já havia respondido, mas não sei pq o meu comentário sumiu. Õ.õ.
Bom, eu tinha escrito isso:
Ai ai ai, tu parece que tem preguiça de ir no menu "Tutoriais para blogger – indice" e buscar e verificar se o q vc procura já não tem link do artigo publicado lá. Isso q vc pediu já existe um tutorial publicado e o link dele está dentro da categoria –> Personalizando Header (Cabeçalho)
Todos os tutoriais relacionados a Header, tem os links dentro da categoria "Header" dentro deste menu.
Eu já dividi o menu "indice" em categoria justamente para facilitar que o próprio leitor possa fazer a busca de conteúdos por conta própria antes de postar alguma dúvida ou pergunta.
O tutorial q vc procura é este:
Imagens Rotativas no Cabeçalho
mas na próxima vez procure fazer uma busca antes no menu de indice dos tutoriais. 😉
Claú, minha pergunta acima dos outros dois comentarios, tem solução?
@Wesley:
Obrigada pelo comentário! =P
@Bruno Sajermann:
Ai ai ai heim…tu parece q tem preguiça de ir no menu de "Tutoriais Blogger" e fazer uma busca no indice de todas as postagens já publicadas.
Isso que vc quer tem o link do tutorial na categoria: –> Personalizando Header (Cabeçalho).
Tudo o q for relacionado ao cabeçalho está linkado dentro desta categoria. Eu já separei o indice por categorias justamente para facilitar o encontro de cada postagem para que o leitor mesmo encontre o q procura por conta propria.
O Link do tutorial que vc quer é este:
Imagens Rotativas no Cabeçalho
Mas na próxima, procure antes, olhar o Menu q citei e procurar o q vc quer lá.
Eu sempre atualizo o indice do Menu Tutoriais para Blogger – índice.
Por que não encontrei este blog antes meu DEUS?
Seus artigos são uma maravilha Clau. Muito bem explicados, organizados e completos. Já assinei o feed. PARABÉNS
Vc tem algum tutorial ensinando aqueles esquema onde Tem a Header principal, e enquanto vc navega pelo blog, cada pagina que vc entra, a header muda…
Vc tem Clau?
Nossa mto bom esse blog jah ate add nos favoritos ^^
@Regiane:
Obrigada…volte sempre aqui viu?
Nossa muito bom este post…. me ajudou muito… o site ja foi pros favoritos…. pra quem num sabe quase nada de HTML é uma mão na roda…
olá, obrigado pelas dicas uqeria ter uma imagem no cabeçalho mas q não seja em forma de link, pois já vou fazer um menu com link pra pagina principal, essa dica serve para essa questão?
queria saber tbm como coloco imagens com efeito Hover no menu.
Muito obrigado pela dica para tirar o cabeçalho ,assim ja posso por o que qizer no topo do blog ,parabens plo blog continua assim
deicho o meu http://www.infohackerv2.blogspot.com