Imagens no topo do Blogger

Imagens no Cabeçalho do Blogger
Só o cume... digo, o topo... ou melhor, o cabeçalho interessa ;-)

Para permitir a inclusão de elementos, imagens inclusive, no cabeçalho do Blogger (da mesma forma que é feito na barra lateral), é necessário alterar algumas linhas do código fonte do template. Na área de edição do HTML, clique na caixa ' Expandir modelos de widgets', e procure pela área abaixo:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='UsuárioCompulsivo (Cabeçalho)' type='Header'/></b:section></div>
Deixe-a da seguinte forma:
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='UsuárioCompulsivo (Cabeçalho)' type='Header'/>
</b:section></div>
Para substituir o cabeçalho em texto por uma imagem, deixe assim:
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
</b:section></div>
Em seguida hospede a imagem de topo que pretende utilizar no cabeçalho do seu blog e adicione um elemento HTML/Javascript, usando o modelo abaixo:
<div><a href="http://seublog.blogspot.com"><img style="border: 0px solid" alt="[Legenda]" src="http://enderece-da-imagem.png"
title="[Legenda]"></img></a></div>
Esse HTML/Javascript pode ser adaptado para inclusão de imagens com links em qualquer local do template que aceite elementos de página.

Imagem: Mataparda

Comentários

  1. Valeu amigo, esse post me salvou.

    ResponderExcluir
  2. Olá...
    Eu estou com uma dúvida..rs
    Eu sei que é coisa boba (ou é muito + complicado do q eu imagino...)
    Mas eh o seguinte: O titúlo do meu blog não fica com as iniciais maiúsculas... Eu não faço a mínima idéia de como eu mudo isso...

    Bjao e antes de tudo brigada pelas dicas...

    Bjuuu

    ResponderExcluir
  3. e tá vendo q nem o meu nome fica com as iniciais maiúsculas..
    aiai... que coisa complicada..
    Bjuuu

    ResponderExcluir
  4. ah e eu sei que eu ja estou falando demais, mas eu keria so pedir pra vc me mandar a solução desse mistério por email?! eh rara.azevedo@gmail.com
    Bjao

    ResponderExcluir
  5. Olá Rá. Dei uma olhada nos seus dois blogs. No "Mary, Bem, Rá e Tita", as iniciais do título estão em maiúsculas... Já no "Rá Azavedo", está tudo em minúsculas.

    O Cabeçalho padrão do Blogger, ficará conforme você definir em Definições / Básico / Título.

    No meu caso, removi o cabeçalho padrão e incluí uma imagem no local.

    Para alterar o seu nome de exibição, que aparece nos seus posts e comentários vá em editar perfil e altere em 'Exibir nome'.

    Espero ter ajudado, boa sorte gatinha...

    ResponderExcluir
  6. Oi! Estava testando o código mas, pelo jeito, consegui estragar o espaçamentos entre os wrappers dos posts e da sidebar... Sabe como faço para arrumar?

    ResponderExcluir
  7. Hoffman, muito legais seus blogs, parabens! Cara, a primeira opção seria restaurar um backup do seu template. Caso não tenha feito backup antes de proceder as alterações, tente reverter as alterações feitas.

    Percebi que quanto estamos logados no Blogger o espaçamento fica "maior" do que quando não estamos, chegasse a perceber algo assim?

    Outra coisa, essas alterações afetam somente o topo do template e não os posts.

    Não sou religioso, e pelo jeito nem você é, mas aqui cabe aquela frase:

    "Só Jesus Salva!"

    []'s

    ResponderExcluir
  8. Compulsivo,
    Talvez este comentário não esteja tão "dentro" do assunto do artigo, mas procurei antes e não achei resposta para minha dúvida.
    Meu blog já tem uma imagem no top, mas gostaria de saber como posso colocar a caixa de pesquisa dentro dela (como vc faz aqui).
    Tenho que criar colunas no cabeçalho? Mas aí, como faria para deixar a imagem ocupando todo o espaço?
    Mais uma vez, muito grata pela sua atenção!

    ResponderExcluir
  9. @Nani, você pode fazer uma nova coluna no cabeçalho ou pode incluir somente o campo de pesquisa direto no código, depende o objetivo.

    Para colocar uma imagem de fundo, diretamente no CSS, use:

    #header-examplo{background:url(http://IMAGEM.PNG) no-repeat;}

    []'s
    Compulsivo

    ResponderExcluir
  10. como eu faço pra alinhar a imagem no centro? ja tentei de tudo, tipow e nada, aguardo sua resposta

    ResponderExcluir
  11. Valeu, amigo Compulsivo... estou customizando o template que coloquei num blog em que coloco programas que acho na internet e suas dicas estão ajudando muito.

    ResponderExcluir
  12. @JCDigital, depende muito de cada template. Este template só mostra como adicionar novas imagens e elementos no cabeçalho do Blogspot e nada mais...

    @Bauru, legal cara. Se puder nos recomendar aos seus leitores, mais gente por aproveitar as dicas compulsivas e nós ficaremos gratos...

    []'s
    Compulsivo

    ResponderExcluir
  13. No código html do meu blog aparece uma linha div id='header-wrapper', mas o conteúdo é diferente do dado no exemplo. O que faço?
    Espero pela resposta.

    ResponderExcluir
  14. Na hora que fui vizualizar o meu blog ficou travado... acho que não deu certo... mas valeu.. vou tentando...

    ResponderExcluir
  15. @Tmpmo, esse é o espírito, queria ter mais leitores assim ;-)

    []'s
    Compulsivo

    ResponderExcluir
  16. Como remover a o cabeçalho padrão e colocar uma imagem no lugar dele?
    Grato

    ResponderExcluir
  17. Compulsivo, por favor me ajude. Fui colocar um template no blog e apareceu esta mensagem abaixo. Você poderia me ajudar.

    Deve haver uma, e somente uma skin no modelo. No entanto, o número de skins encontrado foi: 0

    Matheus

    ResponderExcluir
  18. Compulsivo, desculpe-me pela minha ignorância, mas quando vc diz "Em seguida hospede a imagem de topo que pretende utilizar no cabeçalho do seu blog e adicione um elemento HTML/Javascript", fiquei perdido. Não sei onde faço essa hospedagem. É no próprio blog? Vc poderia responder? Estou fazendo essa mudança para poder ir lá para a outra explicação sua, onde ensina a fazer com que apareçam diversas imagens no cabeçalho, à medida que se atualiza a página. O cabeçalho atual não comporta mais de uma imagem.

    ResponderExcluir
  19. Ola tenho uma pekena duvida.....
    meu template nao ker aceitar meu banner...
    tipo modifikei la..e adicionei meu banner atravez da html...
    mas o nome do blog em branco fikou por cima do banner ...
    como pósso retirar o nome de la???
    podem me ajudar??
    obg..
    parabens seu blog esta mto bom.....

    ResponderExcluir
  20. Compulsivo como citado nos exemplos vc pediu pra ir Na área de edição do HTML, clique na caixa ' Expandir modelos de widgets', e procure pela área abaixo:

    que no caso é o primeiro modelo que vc citou


    o problema é no meu editor do html a área nao é assim no 'header-wrapper'> ta escrito 'sidebar-wrapper'>

    onde ta escrito maxwidgets nao é no mesmo lugar que ta escrito showaddelement o ex. nao é o msm q consta no meu computador aqui, oq posso fazer diante disso?

    ResponderExcluir
  21. não tem esse "trecho" no meu código HTML, mesmo expandindo os modelos de widjets...no meu caso, estou querendo centralizar uma imagem que eu coloquei no cabeçalho do meu blogger, tem como?

    ResponderExcluir
  22. Valeu cara, você me ajudou muito.
    Beijo na boca.

    ResponderExcluir
  23. Como comentar em todos os posts de hacks que instalei no meu novo blog poderia fazer com que eu fosse acusado de querer aparecer na lista de top comentaristas, agradeço apenas nesse que foi o último que instalei. Logo faço um post explicando todas as modificações que fiz. Obrigado, Compulsivo.

    ResponderExcluir
  24. A imagem necessita ser PNG ou pode ser JPG tbm?

    ResponderExcluir
  25. Ola!!!Olha só eu não estou conseguindo aleitar uma foto no meu cabeçalho fica muito grande e não se ajeita.Como faço para ajeitar isso?Por favor...

    ResponderExcluir
  26. Olá compulsivo, meu template é um pouco ruim de mexer, pois quase nunca tem as "palavras" padrões que se usa em códigos como os seus... Meu template é o water color, bloggerizado por
    falcon hive, bom, os meus códigos não batem com o seu, tem como dar uma olhadinha pra mim e me dar uma luz? Preciso fazer essa parte pra ir pra parte de por imagens aleatórias no cabeçalho. Obrigado e parabéns pelo blog.

    ResponderExcluir
  27. @Raphael, claro que posso dar uma olhada. Mas eu cobro por hora. Se tiver interesse me procure através do formulário de contato...

    []'s
    Compulsivo

    ResponderExcluir
  28. Vle compulsivo, esquece, pensei que você faria esse favor de graça :), mas vou dar uma pesquisada por ae e de repente resolvo... Qualquer coisa, posto aqui a resposta.
    Abraço e parabéns mais uma vez.

    ResponderExcluir
  29. Seria excelente após você mostras a dica para adicionar
    novidades nos blogs, mostrar como vai ficar o que pretendemos adicionar,não seria pedir demais?

    ResponderExcluir
  30. Olá, Compulsivo!
    Eu baixei seu modelo (esqueleto compulsivo albino) de blog para organizar o meu. Obrigada: ajudou muito.
    Fiquei com duas dúvidas...
    Como faço para:
    1. Substituir uma imagem pelo cabeçalho (ou excluí-lo);
    2. Alterar o local do pesquisa (queria colocar mais abaixo, na coluna lateral).
    Aguardo seu retorno.
    Obrigada!
    Abraço,
    Marta

    ResponderExcluir
  31. Compulsivo,você respondeu pra @Nani que ela poderia fazer uma nova coluna no cabeçalho. É justamente isso que quero, mas não estou achando aqui, nenhuma dica.

    ResponderExcluir
  32. Por favor ..estou tentando colocar uma imagem em formato png no fim de uma postagem no meu blog com o live writer,mas background não fica trasnparente o q pode ser ?

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio