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 ;
