Cabeçalho do blog ocupando a largura total da página - * Blog Elaine Gaspareto * Cabeçalho do blog ocupando a largura total da página - * Blog Elaine Gaspareto *

Cabeçalho do blog ocupando a largura total da página

Publicado em 03/01/2018

Cabeçalho do blog ocupando a largura total da página

Há, nos blogs que disponibilizam tutoriais de ajuda para blogueiros, uma infinidade de métodos para deixar o cabeçalho do blog na largura total da página.
Alguns funcionam muito bem, outros são incompletos e todos os que eu vi até hoje deixam de lado fatores relevantes:
as particularidades de cada template;
a condicional que o Blogger aplica por padrão ao plano de fundo dos templates;
a resolução de tela (que varia de leitor para leitor);
e o mais importante: a heading tag H1, que "some" quando usamos uma imagem como cabeçalho do blog.
    Quando a gente coloca uma imagem no cabeçalho do blog e configura essa imagem para ser exibida ao invés do nome do blog estamos, automaticamente, eliminado o cabeçalho do ponto de vista do SEO.
    Isso é fatal para o blog em termos de SEO pois a estrutura correta do blog passa pelas heading tags, ou tags de cabeçalho: H1, H2, H3, etc...
    Pretendo trazer em breve um tutorial mais completo sobre as headings tags de cabeçalho, mas hoje vou focar no que o título do post propõe:

    Como fazer o cabeçalho do blog ocupar a largura total da página?


    O truque para dar a impressão de que o cabeçalho ocupa a largura total da tela é usar a imagem que deseja não como cabeçalho, mas sim como plano de fundo.
    O cabeçalho em si será apenas o nome do blog, escrito em uma base de fundo transparente.
    Vou exemplificar, veja:


    Demonstração do tutorial


    Percebe que o plano de fundo faz as vezes de cabeçalho e ocupa a largura total da página?
    O header em si, na verdade, é apenas onde está escrito Clarissa responsive template.
    Veja outro exemplo:

    Clique sobre a imagem para ver ao vivo

    Nesse caso eu coloquei as flores no topo e o nome do blog é o cabeçalho, mas a impressão que dá é que tudo é o cabeçalho.
    Entendeu o que eu disse sobre usar o plano de fundo como  cabeçalho?
    Agora, vamos aprender o passo a passo?


    Como colocar o cabeçalho em toda a largura do blog?


    Para começar você precisa da imagem que deseja usar.
    Se for uma imagem como a do meu exemplo, inteira e que não se repete, ela precisará medir de 1600px de largura em diante. A minha, do blog de exemplo, mede 1800px de largura.
    Eu editei a imagem usando recortes de várias imagens diferentes, e você pode fazer isso para ter algo exclusivo.
    Também pode usar uma imagem da qual goste, bastando para isso que você a edite, recorte e comprima para não pesar mais de 300kb.



    Imagem pronta e no peso certo?
    Então agora vamos escrever o nome do seu blog para ser seu logo.
    Vou usar o Photoscape, tá?
    Aqui no blog tem tutorial que ensina como baixar, instalar e usar o Photoscape, mas você pode usar qualquer editor de imagem que desejar, desde que ele suporte transparências.
    Para fazer o logo de seu blog usando o Photoscape baixe a imagem transparente abaixo; basta clicar sobre ela e salvar em seu computador (sim, ela tá aí, eu juro rsrsr):


    Agora abra o editor de imagem que vai usar (no meu caso, o Photoscape), carregue a base transparente que eu pedi para baixar e escolha a fonte que deseja.
    Escreva o nome do blog como desejar, com as cores que desejar, e depois de pronto recorte a imagem para retirar os excessos, deixando apenas o nome do blog, bem bonito e certinho.
    Salve no formato .png.
    Veja meu exemplo:

    Agora vá ao painel administrativo de seu blog e clique em Layout.
    A seguir clique para editar o cabeçalho e coloque o logo que criou.
    Escolha a opção Em vez de título e descrição, desmarque a opção Reduzir para ajustar e salve.
    Salve a alteração do Layout e a seguir clique na aba Tema.
    Clique em Personalizar.
    Na página que abrir clique em Plano de fundo.

    Caso seu template já tenha algum plano de fundo remova-o.
    Aí clique dentro do quadradinho  do plano de fundo e a seguir clique em Fazer upload da imagem.
    Escolha a imagem de fundo que você preparou previamente (ou use uma das gratuitas que vou disponibilizar abaixo, ao final do tutorial) e a carregue no modelo.
    Em Alinhamento selecione a opção centralizada, selecione Não dividir em blocos e deixe marcado para Rolar com a página.
    Salve e visualize.
    E é isso aí, querido leitor!


    Como usar 2 backgrounds diferentes no mesmo blog?


    Vamos supor que você queira um plano de fundo que faça as vezes de cabeçalho mas também queira inserir uma textura na página toda, de tijolinhos, por exemplo.
    assim:

    Demonstração do tutorial


    Para conseguir isso você precisa ter as imagens de fundo prontas, tanto a que fará parte do cabeçalho quanto a textura ou fundo de página, bem como o logo do blog.
    Imagens prontas?
    Insira o logo como expliquei acima, ele é o seu cabeçalho real.
    Agora hospede as duas imagens que deseja usar, a que fará parte do cabeçalho e a outra, que recobrirá o blog todo.
    Imagens hospedadas?

    Vá ao painel administrativo de seu blog e clique em Tema.
    A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
    Na barra de busca que expandir digite isso:
    body { 
    e tecle Enter para localizar.

    Substitua o trecho:
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    Por:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: url("URL DA IMAGEM DO TOPO") no-repeat scroll top center; }
    html {
    background: $(body.background);
    }

    Está explicadinho aqui, onde você pode copiar os códigos:


    Copiar o código

    Salve, e tá pronto!
    Importante:
    Caso seu template seja baixado da internet esse é o método para incluir dois cabeçalhos nele, ok?
    Também pode usar esse código pra alterar o plano de fundo em templates que não dão acesso ao painel do Blogger.
    Está tudo explicado na página com os códigos.


    Dicas extras muito importantes


    1- Este tutorial foi testado (e funciona) na maioria dos templates do Design de Modelo do Blogger.
    Veja abaixo, marquei com um X os modelos nos quais o tutorial não funciona:



    Exceção:
    No modelo Viagem todos funcionam, mas como precisa editar para retirar a opacidade black achei mais simples deixar só o que não pede edição para funcionar.

    2- Não funciona nos novos templates responsivos (Soho, Comtempo, etc) e nem nos modelos de Visualização dinâmica pois eles não aceitam edição. Nos modelos de Visualização dinâmica é possível inserir plano de fundo mas não como cabeçalho.
    Ok?

    3- Também não testei em templates baixados da internet, mas via de regra não há porque não dar certo.
    Use o Método 2 e faça testes.
    Aliás, faça sempre testes em blogs de teste e nunca em seu próprio blog, tá?

    4- Por padrão, nos templates nativos do Designer de Modelo do Blogger, há uma condicional que redimensiona automaticamente o plano de fundo e o exibe em tamanho reduzido para caber na tela de exibição.
    Então, se você quiser que seu plano de fundo seja exibido em tamanho real tem que retirar essa condicional.

    Se, contudo, preferir  que o redimensionamento seja feito mantenha a condicional.
    No meu blog de exemplo eu retirei a condicional, e você verá a imagem de acordo com sua resolução de tela: quanto mais alta sua resolução, mais da imagem você verá.
    Veja como ela é inteira:

    Como eu disse, se quiser o redimensionamento automático mantenha a condicional. O código dela está na página com os códigos, ok?
    Será esse código:

    <b:if cond='data:skin.vars.body_background.image.isResizable'>
          <b:include cond='not data:view.isPreview' data='{                          image: data:skin.vars.body_background.image,                          selector: &quot;body&quot;                        }' name='responsiveImageStyle'/>
        </b:if>

    Reforçando:
    Quer que a imagem seja redimensionada automaticamente? Mantenha a condicional.
    Quer que fique como eu fiz? Retire-a.

    5- Imagen de fundo grandes, que não são montagens que a gente controla, ficam melhor quando mantemos a condicional que redimensiona automaticamente.
    Em templates não-responsivos também é melhor manter a condicional.
    Se o template for responsivo em geral ele mesmo já redimensona

    6- A tal largura total da página é muito relativa.
    Eu, por exemplo, uso um computador com monitor de 24 polegadas e a minha resolução de tela ideal seria 1900px mas eu uso bem mais baixa, 1152x864.
    Se você usa uma resolução de tela maior que a minha verá mais do meu plano de fundo usado no exemplo.Eu, por exemplo, uso a resolução 1152x864. E você? Talvez use uma bem diferente, né?
    E isso, a resolução de tela, influencia diretamente na maneira que um blog é visto. Por isso é importante que a imagem de fundo que fará as vezes de cabeçalho seja acima de 1800px de largura. A altura não importa.


    Cabeçalhos grátis para usar no blog

    Cabeçalhos grátis para usar no blog

    Abaixo deixei alguns planos de fundo para você baixar e usar gratuitamente.
    Estão numa pasta zipada, basta clicar sobre o botão, baixar a pasta, descompactar e usar em seu blog.
    São livres para uso pessoal mas não podem ser redistribuídos nem comercializados de forma alguma, ok?


    Baixar os cabeçalhos/planos de fundo gratuitos


    E terminamos!
    Em breve vou publicar um tutorial que ensinará o passo a passo de como corrigir as heading tags de cabeçalho do Blogger. Será um post complementar a este, não perca!

    Importante:
    Já publiquei o tutorial que  ensina como corrigir as heading tags do Blogger.
    Acesse e coloque em prática!


    Tenho uma surpresa pra você!


    Disponibilizei 5 templates gratuitos para voce baixar e usar em seu blog.
    Clique: 5 templates gratuitos para baixar e usar no blog
    Baixe, e use como desejar, respeitando os Termos de uso
    Enjoy!


    E me ajuda?
    Compartilhe esse tutorial, assim mais gente tem acesso e eu fico mais feliz...
    Ajude o blog a crescer...




    2 comentários via Blogger
    comentários via Facebook

    2 comentários:

    1. Olá Elaine
      Muito legal esse post.Como sempre eu por aqui,vendo suas dicas maravilhosas.Me preparando para colocar em prática.Obrigada pela generosidade.
      Beijos

      ResponderExcluir
    2. Muito obrigado por atender ao meu pedido! Eu devo ter sido mais uma das que tanto te encheu para ensinar essa proeza acima. Elaine, você é o anjo das blogueiras!

      ResponderExcluir

    Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

    Importante!
    Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
    Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
    Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

    Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



    Muito obrigada, fique à vontade para interagir.
    Mas lembre-se:
    Gentileza, educação e boas maneiras servem também para a vida nos blogs…