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

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á?

• Como fazer backup do blog 

*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.

 

Quer fazer em seu blog mas não tem tempo e/ou paciência para tentar? Quer ter um cabeçalho personalizado, feito especialmente para seu blog? Eu faço pra você!