Como alinhar a imagem de cabeçalho no Blogger

Por | Atualizado em 2015-09-23

O cabeçalho do blog é uma das secções que carrega primeiro na página, e como tal, é importante criar um impacto positivo no visitante. No cabeçalho, é normal usar uma imagem de marca, ajudando a criar uma identidade para o seu blog.

No Montar um Blog, já explicamos como criar logótipos profissionais para o seu blog, e como obter imagens grátis para o cabeçalho, usando o xHeaders.

Neste tutorial, iremos tentar responder a uma das maiores dúvidas dos usuários, como alinhar a imagem de cabeçalho no Blogger.

Como alinhar a imagem de cabeçalho no Blogger

Na prática, o alinhamento pode ser feito através da linguagem de estilo CSS. Com algumas linhas de código você conseguirá alinhar a imagem à direita ou ao centro sem qualquer dificuldade.

Se você necessitar de um alinhamento mais específico, poderá usar as propriedades margin e padding para alinhar a imagem no cabeçalho.

Comece por fazer login na sua conta Blogger e aceda ao meu Modelo. Clique no botão Personalizar para aceder ao designer de Modelos do Blogger.

personalizar template blogger

Agora, clique na opção avançadas -> CSS. Esta opção permite lhe adicionar o CSS diretamente no template sem aceder ao código fonte, ideal se para usuários com conhecimentos reduzidos de programação HTML e CSS.

alinhar a imagem de cabeçalho no Blogger

Se você usar a imagem de cabeçalho juntamente com o texto, ou seja, usar a imagem atrás do título. Digite o seguinte código:

Alinhamento à direita:

#header-inner {background-position: right !important; width: 100% !important;}

Alinhamento ao centro:

#header-inner {background-position: center !important; width: 100% !important; margin: auto;}

Se você usar a imagem do cabeçalho em vez do texto, digite o seguinte código:

Alinhamento ao centro:

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

Alinhamento à direita:

#header-inner img {margin: 0 auto 0 320px;}

Caso pretenda usar as propriedades margin ou padding para alinhar a imagem deverá usar o seguinte código:

#header-inner {margin-left: 50px;}

Altere o valor (50px) para um valor compatível com as suas necessidades.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *