Alterando Imagem do Cabeçalho (header)

Olá! Hoje mostrarei coma fazer uma alteração na imagens de fundo do cabeçalho de seu blog o Header.

Então vamos lá primeiro iremos localizar a imagem no HTML do seu blog, para isso no painel de sua conta Blogger clique em Layout do blog no qual faremos a alteração e em seguida em Editar HTML, marque a opção Expandir modelos de widgets para podermos começarmos.

Lembrando como em qualquer situação que aja necessidade de mexer no HTML do blog é sempre recomendável que você salve uma copia de seu modelo atual no seu computador caso ocorra algo de errado.

Localizando a Imagem

1. Procure no código HTML de seu blog o seguinte trecho header-wrapper para ficar mais fácil use o Ctrl+F.
2. Caso você tenho dificuldade de achar esse trecho em seu HTML você poderá fazer o seguinte visualize seu blog e clique com o botão direito do mouse sobre o cabeçalho da página e clique em Exibir Imagem de Fundo copie o link da imagem e a procure também utilizando o Ctrl+F assim eu uso para fazer as alterações de todas as imagens de meu blog.

Fazendo a Alteração
Com essa dica você irá customizar a sua Header a deixando com o seu gosto por exemplo adicionando um logo ou algo de sua escolha, lembre-se de sempre levar em consideração as dimensões da imagem original para que não aja erros de posicionamento ou algo do tipo veja como exemplo o que eu fiz com a header deste blog.
Antes:

#header-wrapper {
    margin: 0px auto 0 auto;
    width:1000px;
    height:400px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh930go1GQEVygiwQ0twNTWLjvxQ9cudleSWRNvNDZr664giaoEnx55dZd_YxktvQk7_eln9AfPs8jzKNZ07SLS5ew7dxLttQcf0K8c7kaMPMTPfnTy1syjVaxtfOPGgmxsXcl0AYXUyMc/) no-repeat;
    position: relative;
    z-index:5;
}
Depois:

#header-wrapper {
    margin: 0px auto 0 auto;
    width:1000px;
    height:400px;
    background: url(http://img19.imageshack.us/img19/2865/headermcps.jpg) no-repeat;
    position: relative;
    z-index:5;
}
Como vocês podem ver usei um programa de edição de imagens para fazer as alterações e apenas substitui a imagem original por uma editado por mim e notem que a única mudança no trecho HTML é na URL de hospedagem da imagem, para hospedar minha imagem usei o Imageshack.

Esta é uma dica para ser usado em templates que já possuam imagens em sua header. Espero ter ajudado pois assim você poderá fazer alterações não só no cabeçalho mais em todas as imagens de seu blog, pronto vá lá e faça a festa deixe a sua criatividade mostrar do que é capaz.

Compartilhe ! Tweet