Antes de tentar qualquer modificação no seu template, lembre-se de salvar o modelo atual antes. Carregue em visualizar tantas vezes forem necessárias antes de salvar as modificações.
Modificar a imagem do topo novo blogger
Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira pode ser vista neste vídeo AQUI.
Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure HEADER. Se você baixou um template daqui, provavelmente encontrará o endereço de uma imagem e suas medidas. Vai estar mais ou menos assim:
Em header-wrapper está a medida total do cabeçalho. Você pode definir aqui uma distância entre Header e as colunas abaixo aumentando o valor de height além do tamanho da imagem que pretende utilizar.
Logo abaixo você encontra #header onde você deverá colocar o endereço da imagem (link) e especificar width e height ( largura e altura) . Hospede sua imagem em algum site (ImageShack, Photobucket, etc) e copie o endereço da imagem, colocando entre os parênteses, como mostra o exemplo. Center, centraliza a imagem. Se deseja que a imagem fique à esquerda, substitua center por left e, direita, por right.
Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;
Onde border determina que é em toda volta da imagem, 1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.
Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;
Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;
Borda à direita da imagem:
border-right: 1px solid #000000;
Borda no "pé" da imagem:
border-bottom:1px solid #000000;
Lembrando que, para colocar borda nos quatro cantos da imagem, basta escrever:
border:1 px solid #000000;
Tipos de borda:
dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma
Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(endereço da imagem) no-repeat left;
onde #FFFFFF é a cor da fundo do topo, e left é onde a imagem ficará (à esquerda). Se for à direita, coloque right e se for no centro, center.
Background: url(endereço da imagem) ____ repeat;
O traço representa apenas o espaço necessário entre o endereço e repeat.
Colocar outro elemento no topo da página
Você pode dividir o espaço do cabeçalho com outro elemento se desejar, por exemplo, feed ou um banner. Para isso, basta diminuir a largura de #header e estipular uma margem à esquerda de 5px. (ou 0px se preferir). Para isso, antes de tudo, é necessário consultar a largura (width) de #Outer-wrapper, que é a DIV que engloba todos os outros elementos da página (header, main, sidebar, footer). Se Outer-Wrapper tem width:800px; a soma do elemento #header mais o novo elemento a ser inserido ao lado não pode ultrapassar este valor.
Ex:
#header{
width: 600px;
height: 140px;
margin: 10px 5px 10px 5px;}
O que fiz foi diminuir a largura de header (para dar espaço ao novo elemento que deverá se encaixar no topo à direita) e estipular uma margem de 10px para o topo da página, 5px para a direita, 10px para baixo e 5px para a esquerda. Tendo feito header recuar para a esquerda, posso inserir um novo elemento à sua direita, no espaço restante:
feed{
width: 150px;
height: 80px;
background: url(imagem do feed) no-repeat;
margin: 0 auto 0px;}
Não se esqueça de criar no HTML uma div feed, assim:
<div id="feed"><a href="endereço do feed"><span>Feed on Me</span></a></div>
Este é só um exemplo, você pode criar outras divs que desejar.
Modificar a imagem do topo novo blogger
Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira pode ser vista neste vídeo AQUI.
Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure HEADER. Se você baixou um template daqui, provavelmente encontrará o endereço de uma imagem e suas medidas. Vai estar mais ou menos assim:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:750px;
height:120px;
margin:0 auto 0px;
}
#header {
margin: 0px;
width:750px;
height:100px;
background: url('url da imagem') center;
text-align: left;
color:$pagetitlecolor;
border: 1px solid $bordercolor;
}
-----------------------------------------------
*/
#header-wrapper {
width:750px;
height:120px;
margin:0 auto 0px;
}
#header {
margin: 0px;
width:750px;
height:100px;
background: url('url da imagem') center;
text-align: left;
color:$pagetitlecolor;
border: 1px solid $bordercolor;
}
Em header-wrapper está a medida total do cabeçalho. Você pode definir aqui uma distância entre Header e as colunas abaixo aumentando o valor de height além do tamanho da imagem que pretende utilizar.
Logo abaixo você encontra #header onde você deverá colocar o endereço da imagem (link) e especificar width e height ( largura e altura) . Hospede sua imagem em algum site (ImageShack, Photobucket, etc) e copie o endereço da imagem, colocando entre os parênteses, como mostra o exemplo. Center, centraliza a imagem. Se deseja que a imagem fique à esquerda, substitua center por left e, direita, por right.
Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;
Onde border determina que é em toda volta da imagem, 1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.
Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;
Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;
Borda à direita da imagem:
border-right: 1px solid #000000;
Borda no "pé" da imagem:
border-bottom:1px solid #000000;
Lembrando que, para colocar borda nos quatro cantos da imagem, basta escrever:
border:1 px solid #000000;
Tipos de borda:
dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma
Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(endereço da imagem) no-repeat left;
onde #FFFFFF é a cor da fundo do topo, e left é onde a imagem ficará (à esquerda). Se for à direita, coloque right e se for no centro, center.
- Para que o navegador Internet Explore interprete corretamente o código, é preciso sempre dar um bom espaço entre o endereço da imagem e o comando que vem depois:
Background: url(endereço da imagem) ____ repeat;
O traço representa apenas o espaço necessário entre o endereço e repeat.
Colocar outro elemento no topo da página
Você pode dividir o espaço do cabeçalho com outro elemento se desejar, por exemplo, feed ou um banner. Para isso, basta diminuir a largura de #header e estipular uma margem à esquerda de 5px. (ou 0px se preferir). Para isso, antes de tudo, é necessário consultar a largura (width) de #Outer-wrapper, que é a DIV que engloba todos os outros elementos da página (header, main, sidebar, footer). Se Outer-Wrapper tem width:800px; a soma do elemento #header mais o novo elemento a ser inserido ao lado não pode ultrapassar este valor.
Ex:
#header{
width: 600px;
height: 140px;
margin: 10px 5px 10px 5px;}
O que fiz foi diminuir a largura de header (para dar espaço ao novo elemento que deverá se encaixar no topo à direita) e estipular uma margem de 10px para o topo da página, 5px para a direita, 10px para baixo e 5px para a esquerda. Tendo feito header recuar para a esquerda, posso inserir um novo elemento à sua direita, no espaço restante:
feed{
width: 150px;
height: 80px;
background: url(imagem do feed) no-repeat;
margin: 0 auto 0px;}
Não se esqueça de criar no HTML uma div feed, assim:
<div id="feed"><a href="endereço do feed"><span>Feed on Me</span></a></div>
Este é só um exemplo, você pode criar outras divs que desejar.
0 comentários:
Postar um comentário