Obs: Todos os tutoriais apresentados foram baseados no template Mínima, do Blogger.
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 é através do painel do Blogger:
1- Vá em Layout e clique em Editar no espaço que corresponde ao cabeçalho:
2- Na janela que se abre, clique em Arquivo para buscar uma imagem no seu computador e depois escolha se deseja que a imagem apareça por trás do título ou descrição ou se a imagem deve substituir o título.
Note que para que a imagem fique centralizada, ela deve obedecer o espaço destinado ao cabeçalho. No template Mínima, sem modificações, este´espaço é de 660px de largura. Se você usa um template modificado, certifique-se da largura e altura de #header-wrapper, para dimensionar sua imagem.
Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure #header-wrapper: #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
Você pode alterar a largura (660px) para mais ou para menos e estipular uma altura para o cabeçalho, acrescentando height, desta maneira:
#header-wrapper { width:660px;
height: 120px;
margin:0 auto 10px; border:1px solid $bordercolor; }
Hospede sua imagem que deseja colocar no cabeçalho em algum site (ImageShack, Photobucket, TinyPic,etc) e copie o link da imagem. O link deve ser colocado em background, como abaixo:
#header-wrapper { width:660px; height: 120px;
background: url(link da imagem) no-repeat top center.
margin:0 auto 10px; border:1px solid $bordercolor; } O trecho em verde determina se a imagem se repetirá ou não. O comportamento da imagem pode ser:
no-repeat - a imagem não se repete
repeat - a imagem se repete tanto na horizontal quanto na vertical.
repeat-x - a imagem se repete horizontalmente
repeat-y - a imagem se repete na vertical O trecho em vermelho determina a posição da imagem no cabeçalho, que pode ser:
top left - a imagem aparece no topo à esquerda
top center - a imagem aparece no topo ao centro
top right - a imagem aparece no topo à direita
bottom left - a imagem aparece na base, à esquerda
bottom center - a imagem aparece na base ao centro
bottom right - a imagem aparece na base à direita. Se você deseja colocar borda em sua imagem, faça assim: Borda em toda a imagem:
border: 1 px solid #000000;
Onde 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 na base da imagem:
border-bottom:1px solid #000000;
Lembrando que, para colocar borda nos quatro cantos da imagem, basta colocar:
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).
- 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 a url 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.
fonte : https://templatesparanovoblogger.blogspot.com/2007/03/como-modificar-seu-template-no-novo.html
){kind=link}