quinta-feira, 6 de janeiro de 2011

Como alinhar a imagem, o título e a descrição no cabeçalho do blog (1)



Tem havido uma série de questões levantadas sobre o alinhamento das imagens do cabeçalho. Em alguns casos, as fotos são ou não centralizadas, ou não podem ser deslocadas para a esquerda ou à direita do cabeçalho. Espero que este artigo possa ajudar você a ter mais controle sobre a posição da imagem. Irei explicar como conseguimos alinhar a imagem do cabeçalho nos diferentes modelos do Blogger. Para completar, também discutiremos como o título e a descrição podem ser centralizados ou alinhados para o lado do cabeçalho.

Para esclarecer, se você tiver escolhido para que a imagem apareça "Atrás do título e da descrição", o título e a descrição segue a imagem onde quer que vá. Se você quiser o título do lado esquerdo do cabeçalho e a imagem do lado direito, a maneira mais fácil é você criar uma imagem grande, usando um editor de imagem, colocar o título e salvar como uma imagem composta. Desta forma, o título e a descrição ficarão exatamente onde você quer que eles fiquem. Fazer upload de imagem para o cabeçalho e para o posicionamento, escolha "Em vez de título e descrição".

Lembre-se de clicar em "Visualizar" após as alterações ao modelo. Só depois que estiver satisfeito com as configurações que você deve clicar em "Salvar Modelo".


Modelo Mínima

No modelo de Mínimos, o título e a descrição são automaticamente alinhados ao centro. Se você quer que eles sejam, à esquerda do cabeçalho, alterar o código de alinhamento (mostrada em verde):

#header {
text-align: center;

Para alinhar à esquerda, troque por text-align: left;
Para alinhar à direita, use text-align:right;

A imagem de cabeçalho que é carregada também permanece no centro do cabeçalho. Se você quer que ele seja mais alinhado, por exemplo, vá até essas linhas e mude o "auto" na margem esquerda com uma largura fixa:

#header-inner {
background-position: center;
margin-left: 100px ;
margin-right: auto;
} 


Para a imagem a ser da extrema direita do cabeçalho, você pode alterar a margem direita para 0px:

margin-left: auto;
margin-right: 0px ;


Modelo Denim

O título Denim e descrição estão à esquerda do cabeçalho. Para ter o título de cabeçalho no centro, insira o código de alinhamento (mostrada em verde):

h1.title {
text-align: center; 
 
Para a descrição a ser no centro, adicione o código de alinhamento (em verde):

#header .description {
text-align: center; 

 Quanto à imagem de cabeçalho, é alinhado à esquerda. Para mover a imagem para o centro ou da direita, localize / * Cabeçalho / e cole esse código abaixo dela:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
} 

Da mesma forma, se você quiser que a imagem seja mais próxima à direita, insira uma determinada margem esquerda em vez de deixá-lo "auto", assim:

margin-left: 200px ;
 

A imagem também pode ser no canto direito do cabeçalho, se você definir a margem direita para 0px:

margin-left: auto;
margin-right: 0px ;


Template Rounders 

O título e a descrição são automaticamente alinhados à esquerda.  Você pode ter o título de cabeçalho no centro, adicionando este código (mostrado em verde):

#header h1 {
text-align: center;
 

Para a descrição a ser no centro, você pode inserir o código de alinhamento aqui:

#header .description {
text-align: center;

Caso você queira uma posição específica para o título e descrição, você também pode definir as margens esquerda ao invés, por exemplo:

#header h1 {
margin-left: 200px;

A imagem enviada no cabeçalho é alinhado à esquerda. Você pode ter a imagem no centro, adicionando o código:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Para mover a imagem para a direita, mudar o "auto" na margem esquerda para um valor fixo como este:

margin-left: 200px ;
 
Você pode ter a imagem da direita, definindo a margem direita para 0px:

margin-left: auto;
margin-right: 0px ;


12 comentários:

SEU NOME disse...

colocar o nome do blog no cabeçalho embaixo como fazer

David Oliveira disse...

mudei o template do meu blog e a imagem do topo do meu blog ticou desalinhada. ja tentei de tudo! HELP ME
meu blog: www.darkstoneimagens.blogpost.com

resultadojogodobicho.blogspot.com disse...

Obrigado ajudou e muito viu.
sorte ai..
wlw

The Blogger Better disse...

Estou começando a criar meu blog, o Blogger Better Testes, e usei seu post para centralizar o texto.
Muito obrigado pela dica.
The Blogger Better.

testando blogger disse...

Manolo, pf me ajudaa estou desenvolvendo este template: http://teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeste.blogspot.com
e desejo trocar esta imagem http://i.imgur.com/Mt9UV.png
por esta imagem
http://i.imgur.com/aTU6w.png
Eu tentei essas suas dicas de alinhamento de iamgem mas acontece que ela vai até a extremidade da postagem, e aew apara lá independente do código que eu usar ajuda aê brow

Cristiano Xavier disse...

OI eu estou com um pouco de dificuldade. Eu tenho um widget no meu site com duas imagens
( duas telas ) Mas nao consigo colocar elas lado a lado
poderia me passar um codigo html que reslolve o problema ? obg

Unknown disse...

QUERO CENTRALIZAR O CABEÇALHO DO MEU BLOG, O TEMPLATE É VIAJEM. COMO FAÇO? DESDE JÁ OBRIGADO!

Isabelle Fontaine disse...

uma perguntinha idiota: ooooonde é que eu coloco o código de alinhamento? :S

Priscila disse...

Oi Brilho das noivas,

sabe me dizer seu template?
Abrçs.

Priscila disse...

Tente adicionar alguns destes comandos aí em cima, abaixo deste código que você achou e veja se modifica.

Priscila disse...

Oi Eliane, procure por header, o negócio é adicionar o código: text-align: center; embaixo.

Abrç.

Priscila disse...

Isaa, depende do template que vc esta usando. Por exemplo, se for o minima vc vai colocar embaixo de:

#header {

Certo?

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...