TUTORIAL COMO CRIAR UM CABEÇALHO
Tamanho do cabeçalhoAcesse o painel > Design > Editar Html e salve uma cópia do seu template por segurança.
Vamos procurar pelo seguinte trecho:
#header-wrapper {
width:660px;
height:180px; margin:0 auto 10px;
border:1px solid $bordercolor;
}
width: indica a largura do cabeçalho
height: altura
Se seu template não possuir a parte em negrito, acrescente-a no local indicado.
Caso não queira a borda, troque a parte border:1px solid $bordercolor; por border: 0;
Guarde os números que você encontrou, para usá-los depois.
Colocando uma imagem
Sabendo a altura e a largura do cabeçalho, você pode adicionar imagens corretamente nele, de duas formas:
1. Direto no código:
Para usar uma imagem direto no código, você vai precisar hospedá-la em algum site de sua preferência.
Com isso, basta inserir o trecho em negrito abaixo:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(Endereço da imagem) bottom center;
}
Você pode alterar o bottom certer para:
2. Através do Design do blog
Clique em Design, e no seu cabeçalho clique em Editar. Posteriormente clique em "Procurar" e encontre a imagem no seu computador. Se a imagem já tem o nome do seu blog nela, marque a opção "Em vez de título e descrição", caso contrário marque "Por trás de título e descrição" e salve as alterações.
Sugestão: Deixo aqui um programa editor de cabeçalhos, bem simples de usar, que já vem com alguns modelos de cabeçalho prontos, o nome dele é XHeader.
Tamanho do cabeçalhoAcesse o painel >
Vamos procurar pelo seguinte trecho:
#header-wrapper {
width:660px;
height:180px; margin:0 auto 10px;
border:1px solid $bordercolor;
}
width: indica a largura do cabeçalho
height: altura
Se seu template não possuir a parte em negrito, acrescente-a no local indicado.
Caso não queira a borda, troque a parte border:1px solid $bordercolor; por border: 0;
Guarde os números que você encontrou, para usá-los depois.
Colocando uma imagem
Sabendo a altura e a largura do cabeçalho, você pode adicionar imagens corretamente nele, de duas formas:
1. Direto no código:
Para usar uma imagem direto no código, você vai precisar hospedá-la em algum site de sua preferência.
Com isso, basta inserir o trecho em negrito abaixo:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(Endereço da imagem) bottom center;
}
Você pode alterar o bottom certer para:
bottom left : alinhar à esquerda
bottom right: alinhar à direitaClique em Design, e no seu cabeçalho clique em Editar. Posteriormente clique em "Procurar" e encontre a imagem no seu computador. Se a imagem já tem o nome do seu blog nela, marque a opção "Em vez de título e descrição", caso contrário marque "Por trás de título e descrição" e salve as alterações.
Sugestão: Deixo aqui um programa editor de cabeçalhos, bem simples de usar, que já vem com alguns modelos de cabeçalho prontos, o nome dele é XHeader.
0 comentários:
Postar um comentário