|
CONSIDERAÇÕES INICIAIS |
Alguns modelos de temas do Blogger, como o Awesome, deixam o título
principal do blog e os títulos dos widgets e das postagens alinhados no lado
esquerdo da tela. Nesse tutorial, confira como centralizar o título principal
do blog, além do título das postagens e dos widgets.
Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc.
ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome,
clique aqui.
Antes de realizar qualquer um dos procedimentos a seguir, primeiramente
faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o
blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma
dúvida sobre o backup, clique aqui.
|
COMO CENTRALIZAR O TÍTULO DO BLOG? |
Confira como
centralizar o título principal do blog em 11 passos:
1º Passo: acesse a página inicial do Blogger.
2º Passo: selecione o nome do seu blog.
3º Passo: clique em Tema.
4º Passo: clique na seta ao lado do botão Personalizar
e escolha a opção Editar HTML.
5º Passo: clique em qualquer local dentro do HTML do blog.
6º Passo: no teclado, pressione as teclas CRTL+F para abrir a caixa de pesquisa do
HTML.
7º Passo: pesquise pelo trecho abaixo:
.header-outer {
Clique aqui para copiar o trecho acima.
8º Passo: clique na frente
desse trecho e pressione a tecla Enter
para inserir uma linha em branco abaixo desse trecho.
9º Passo: abaixo do trecho pesquisado, escreva o código: text-align: center;
Clique aqui para copiar o código acima.
Confira como o
código era:
|
/*
Header -----------------------------------------------
*/ margin: $(header.margin.top) 0
$(header.margin.bottom) 0; |
Confira como o código vai ficar:
|
/*
Header -----------------------------------------------
*/ .header-outer
{ text-align:
center; margin: $(header.margin.top) 0
$(header.margin.bottom) 0; |
10º Passo: clique em visualizar para conferir o resultado.
11º Passo: para finalizar, clique em Salvar.
O código text-align: center; é uma declaração de
estilo responsável pelo alinhamento de um elemento do blog, como por exemplo, o
título do blog. Já o termo center
indica que o alinhamento será centralizado.
É possível
substituir o trecho center por left ou right.
Left: deixa o título do blog alinhado no lado esquerdo da tela.
Right: deixa o título do blog alinhado no lado direito da tela.
|
COMO CENTRALIZAR O TÍTULO DOS WIDGETS? |
Para centralizar o
título dos widgets, deve realizar o mesmo procedimento para centralizar o
título principal do blog, alterando apenas o sétimo passo.
7º Passo: pesquise pelo trecho abaixo:
.main-inner .widget h2 {
Clique aqui para copiar o trecho acima.
8º Passo: clique na frente
desse trecho e pressione a tecla Enter
para inserir uma linha em branco abaixo desse trecho.
9º Passo: abaixo do trecho pesquisado, escreva o código: text-align: center;
Clique aqui para copiar o código acima.
Confira como o
código era:
|
.main-inner
.widget h2 { margin: 0 -$(separator.outdent); |
Confira como o código vai ficar:
|
.main-inner
.widget h2 { text-align:
center; margin: 0 -$(separator.outdent); |
10º Passo: clique em visualizar para conferir o resultado.
11º Passo: para finalizar, clique em Salvar.
|
COMO CENTRALIZAR O TÍTULO DOS WIDGETS
DO RODAPÉ? |
O termo main-inner .widget h2 corresponde
apenas ao título dos blogs nos widgets que estão fora do rodapé do blog. Para
centralizar o título dos widgets que estão dentro do rodapé, realize o mesmo
procedimento acima, alterando apenas sétimo passo.
7º Passo: pesquise pelo trecho abaixo:
.footer-inner .widget h2 {
Clique aqui para copiar o trecho acima.
8º Passo: clique na frente
desse trecho e pressione a tecla Enter
para inserir uma linha em branco abaixo desse trecho.
9º Passo: abaixo do trecho pesquisado, escreva o código: text-align: center;
Clique aqui para copiar o código acima.
Confira como o
código era:
|
.footer-inner
.widget h2 { padding: 0 0 .4em; |
Confira como o código vai ficar:
|
.footer-inner
.widget h2 { text-align: center; padding: 0 0 .4em; |
10º Passo: clique em visualizar para conferir o resultado.
11º Passo: para finalizar, clique em Salvar.
|
COMO CENTRALIAR O TÍTULO DA POSTAGEM? |
Para centralizar o
título das postagens, também deve realizar o mesmo procedimento para
centralizar o título principal do blog, alterando apenas o sétimo passo.
7º Passo: pesquise pelo trecho abaixo:
h3.post-title, h4 {
Clique aqui para copiar o trecho acima.
8º Passo: clique na frente
desse trecho e pressione a tecla Enter
para inserir uma linha em branco abaixo desse trecho.
9º Passo: abaixo do trecho pesquisado, escreva o código: text-align: center;
Clique aqui para copiar o código acima.
Confira como o
código era:
|
h3.post-title,
h4 { font:
$(post.title.font); |
Confira como o código vai ficar:
|
h3.post-title,
h4 { text-align:
center; font: $(post.title.font); |
10º Passo: clique em visualizar para conferir o resultado.
11º Passo: para finalizar, clique em Salvar.
|
CONSIDERAÇÕES FINAIS |
Dessa forma, utilizando o código text-align:
center; é possível centralizar o título principal do blog, além do título
dos widgets e das postagens, conforme resumo a seguir.
Para centralizar o título principal do blog, incluir o código citado abaixo
de: .header-outer {
Para centralizar o título dos widgets, incluir o código citado abaixo de:
.main-inner .widget h2 {
Para centralizar o título dos widgets dentro do rodapé, incluir o código
citado abaixo de: .footer-inner .widget
h2 {
Para centralizar o título das postagens, incluir o código citado abaixo
de: h3.post-title, h4 {
Portanto, esse tutorial visou compartilhar um pouco de nossos
conhecimentos sobre a centralização do título principal do blog, bem como dos títulos
dos widgets e das postagens.
|
Por: Santos.
Elaborado em: 15/11/2025. Publicado em: 15/11/2025. Atualizado em: 15/11/2025. Obrigado pela
sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou
entre em contato conosco. |
Nenhum comentário:
Postar um comentário