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 ;


13 comentários:

Hugo Green disse...

Seguindo seu Blog!

Segue o meu:

http://bloghugogreen.blogspot.com

Brilho das Noivas 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

grupowebnet@live.com 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

⊰⊹✿Eliane disse...

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

Isaa' Caroline 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...