Ao 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:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:750px;
height:120px;
margin:0 auto 0px;
}
#header {
margin: 0px;
width:750px;
height:100px;
background: url('url da imagem') no-repeat 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') no-repeat center;
text-align: left;
color:$pagetitlecolor;
border: 1px solid $bordercolor;
}
Em header-wrapper está a medida total do cabeçalho.
Em #header você deverá colocar o link da imagem e especificar width e height ( largura e altura) e o posicionamento desta imagem. Hospede sua imagem em algum site (ImageShack, Photobucket, etc) e copie o link 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(link da imagem) no-repeat top left;
onde #FFFFFF é a cor do fundo, e top left é o posicionamento da imagem (à esquerda, no topo). 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) ____ no-repeat;
O traço representa apenas o espaço necessário entre o endereço e no-repeat.
Colocar outro elemento no topo da página
Para dividir o cabeçalho com outro elemento (Feed, Banner, etc) é necessário notar a largura total de #Header-Wrapper e a soma dos elementos contidos nele não podem ultrapassar este valor.
Ex:
#Header-Wrapper{
width: 800px;}
#Header{
width: 350px;
float: left; } (flutua à esquerda dentro de Header-Wrapper)
#NovaDiv{
width: 450px;
float: right;} (flutua à direita dentro de Header-Wrapper)
Não se esqueça de acrescentar no HTML a nova DIV, antes do fechamento de Header-Wrapper, assim:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Cabeçalho)' type='Header'/>
</b:section>
<div id='NovaDiv'><b:section class='novadiv' id='novaid' maxwidgets='1' showaddelement='yes'></div>
</div>
Como retirar o cabeçalho
Procure por:
<b:widget id='Header1' locked='true' title='Novo Templates (Cabeçalho)' type='Header'/>
</b:section>
</div>
Troque true por false e será possível retirar o cabeçalho da página no painel de controle.
Para inserir Elementos de Página no cabeçalho
Procure por
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Onde está 1, troque pelo números de widgets que deseja inserir no cabeçalho e onde está no, substitua por yes.