postagem pos backup
Muitas vezes, começamos a aprender como utilizar uma ferramenta e automaticamente passamos a acreditar que todos possuem tal conhecimento (acho que eu já disse isso), o que na verdade, acaba prejudicando quem está aprendendo, pois se torna cada vez mais difícil encontrar informações básicas sobre o seu blog.
Uma das coisas que me surpreendeu, foi ver nas estatísticas do blog o número de pessoas que chegam até aqui procurando informações de como encontrar o tamanho certo da imagem que usa ou quer usar no header (cabeçalho) do blog. Não é difícil entender, pois basta procurar um pouco, para encontrar vários blogs novos com a imagem torta ou "diferente" do normal.
Então, se você é um desses que chegou até aqui procurando por isso, aí vai:
Descobrindo o Tamanho da Imagem
Vá até a parte de edição de html do seu blog (lembre-se de salvar uma cópia do seu template sempre que for modificar algo), procure pelo trecho abaixo:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Esse é o trecho que indica a largura do header do seu blog. (retirado do modelo mínima, se você usa um outro modelo, procure por um trecho parecido, o importante aqui é identificar o #header-wrapper). Onde:
#header-wrapper {
width:660px; ———————————–> Largura do Header
margin:0 auto 10px;
border:1px solid $bordercolor; ———-> Borda do Header
}
Para colocar uma imagem no header, basta que sua imagem tenha a mesma largura indicada aqui.
O modelo mínima não vem com indicação da altura do header, mas você pode acrescentar esse trecho, caso esteja tendo algum problema com a imagem. Supondo que sua imagem tenha 180 pixels de altura, basta acrescentar height:180px; (não se esqueça do ponto-e-vírgula no final). No nosso exemplo ficaria assim:
#header-wrapper {Se você quiser, pode retirar a borda que está marcada aqui, basta modificar o código assim:
width:660px; ———————————–> Largura do Header
height:180px;
margin:0 auto 10px;
border:1px solid $bordercolor; ———-> Borda do Header
}
border:0;
Adicionando Uma Imagem
Conseguindo descobrir a largura e sabendo a altura do header, fica fácil adicionar uma imagem ao mesmo. Coisa que pode ser feita de duas formas:
01 – Direto no código:
Para usar uma imagem direto no código, você vai precisar hospedá-la em algum lugar. Você pode usar o próprio Blogger para isso, como eu já escrevi nesse texto:
Com o endereço da imagem em mãos, basta inserir o trecho que está em negrito no código:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(ENDEREÇO DA IMAGEM) bottom center;
}
Se quiser alinhar a imagem de outra forma, troque o bottom center! Alinhar a esquerda: bottom left ou a direita bottom right.
02 – Através do campo "Layout" do blog:
Na sua conta do blogger, clique em "Layout" no blog que você quer adicionar a imagem e na página "Elementos de página" clique em "Editar" (na parte relativa ao header), clique em "Procurar" e encontre a imagem no seu computador. Se a imagem conta com o nome do seu blog nela, marque a opção "Em vez de título e descrição", caso contrário, com a opção "Por trás de título e descrição" (ideal) marcada, clique em "SALVAR ALTERAÇÕES".
Confira o resultado, estando tudo como você queria é só clicar em "SALVAR" e pronto!
Tags: Blog, Cabeçalho, Header Relacionados:
Nenhum comentário:
Postar um comentário