Como centralizar título e imagem do cabeçalho?

Filled under:

1248963585_interrogacao1
Para centralizar uma imagem com dimensões diferentes da
 largura total do cabeçalho você precisará editar o código-fonte
 de seu blog. 
Como sempre, recomendo que você faça backup antes de
 mexer no HTML do blog, tá?


*Tutorial para o novo painel do Blogger

Como centralizar a imagem do cabeçalho?

Estando logado, clique em Modelo. A seguir clique em Editar HTML.
 Se aparecer um
 aviso para tomar cuidado, clique em Prosseguir.Pode clicar, confie 
em mim.
Na página que abrir marque a caixinha Expandir modelos de widgets.
 Agora, usando 
as teclas F3(no Chrome e no Firefox) ou Ctrl+f (no Explorer) encontre
 este trecho:

<img expr:alt='data:title' expr:height='data:height' 
expr:id='data:widget.instanceId +
 &quot;_headerimg&quot;' expr:src='data:sourceUrl' 
expr:width='data:width'
 style='display: block'/>

Agora preste atenção! Antes do início do código que pedi para
 encontrar coloque
 a div <center> e ao final do código coloque o fechamento da div
 </center>. Então 
o código completo deve ficar assim:

<center><img expr:alt='data:title' expr:height='data:height' 
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' 
expr:src='data:sourceUrl' expr:width='data:width'
 style='display: block'/></center>

Clique em Visualizar. E se estiver tudo ok, salve as modificações.

Como centralizar o título do blog?

Pode ser que você não use uma imagem, mas apenas o nome de
 seu blog. Por
 padrão ele está alinhado à esquerda. Então vamos aprender como
 centralizar?
Com o código-fonte de seu blog aberto encontre esta linha:

.Header h1 {

Abaixo dela coloque o comando para centralizar:

text-align: center;

Visualize. Se tudo deu certo o título de seu blog agora está centralizado.
 Salve as alterações.
Importante!
A centralização da imagem só funciona se, ao escolher a forma de 
instalar a imagem, você selecionar a opção Em vez de título e descrição.
A centralização do título só funciona se você não estiver usando 
nenhuma imagem no cabeçalho.
Para ter ambos, título e imagem, no tamanho e posição que você 
quiser é preciso criar em um editor de imagens (tipo Photoshop)
 o cabeçalho que deseja usar. Depois de pronta a imagem
 basta clicar em Editar, no cabeçalho e escolher a opção
 Ao invés de título e descrição.
Os códigos podem variar de template para template. 
Testei em todos os nativos do Blogger e deu certo,
 mas em templates externos ou que tenham sofrido 
muitas alterações pode não funcionar.

2 comentários:

Obrigado pela visita e mais ainda pelo comentário...