[Blogger - Custoomização] - Melhore a leitura dos seus visitantes customizando seus textos

No artigo anterior eu falei um pouco sobre a importância de fornecer uma boa experiência de leitura para os visitantes do seu blog, para que eles se sintam mais a vontade enquanto leem o seu conteúdo. O ponto principal do artigo foi o espaçamento entre as linhas, mas no final eu também falei sobre outras técnicas que você poderia usar em conjunto com o espaçamento para deixar a leitura ainda mais agradável.


Se você ainda não leu o artigo anterior, aconselho que o leia para melhorar o seu entendimento sobre o assunto — e para deixar sua opinião sobre o mesmo.


Mas de nada adianta falar sobre essa questão sem fornecer uma solução para ela, por isso, no artigo de hoje eu mostrarei como você pode customizar o estilo dos seus textos de forma muito simples e rápida, veja os tópicos abaixo.

Aumentando o espaçamento entre as linhas


Neste tópico veremos como adicionar um espaçamento maior entre as linhas do texto do artigo. Isso é algo muito simples, mas com certeza já afetará de maneira positiva a leitura dos seus textos.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>
3. Imediatamente acima deste código, adicione esse outro código.

.post-body, .entry-content, .entry-summary {line-height: 2 !important;}
4. O valor destacado em azul, indica o tamanho do espaçamento, altere o valor para mais para aumentar o espaço entre as linhas, ou para menos para diminuir — você pode usar valores como: 1, 1.5, 2, 2.3, 1.15 e etc. Para finalizar clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Note que se você estiver usando um template dinâmico, você não poderá clicar sobre o botão "Editar HTML" para adicionar o código que foi mostrado acima, portanto, deverá clicar no botão Personalizar, e em seguida ir no menu Avançado > Adicionar CSS e colar o código dentro do campo indicado. Em seguida finalize a customização clicando no botão Aplicar ao blog.

Pronto, com isso qualquer template do Blogger que você estiver usando, seja ele dinâmico ou não, passará a ter uma espaçamento entre linhas maior e mais confortável.

Adicionando um alinhamento justificado ao texto


Por padrão, tudo o que escrevemos no blog aparece com alinhamento à esquerda, mas uma técnica que, unida a um bom espaçamento, pode trazer ainda mais conforto a leitura do seu visitante, é o alinhamento justificado do texto. Muitos blogueiros, ainda mais os iniciantes, justificam o texto diretamente no conteúdo, mas veremos agora como justificar o texto de todos os artigos de maneira automática, rápida e simples.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>
3. Imediatamente acima deste código, adicione esse outro código.

.post-body, .entry-content, .entry-summary {text-align: justify !important;}
4. Para finalizar clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Note que se você estiver usando um template dinâmico, você não poderá clicar sobre o botão "Editar HTML" para adicionar o código que foi mostrado acima, portanto, deverá clicar no botão Personalizar, e em seguida ir no menu Avançado > Adicionar CSS e colar o código dentro do campo indicado. Em seguida finalize a customização clicando no botão Aplicar ao blog.

Pronto, com isso todos os seus artigos já aparecerão com o alinhamento justificado, sem que você precise fazer esse alinhamento manualmente para cada artigo.

Customizando a fonte dos artigos


Outra questão que pode ajudar bastante na leitura do conteúdo é a formatação do seu texto. Entenda formatação como o tipo de fonte usada, tamanho e estilos. Todos os templates do Blogger já possuem um suporte para facilitar essa edição no Designer de modelo, o que ajuda muito. Mas pessoas que utilizam templates de terceiros podem não possuir esse tipo de suporte. E agora veremos como customizar a fonte do texto nesses casos.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>
3. Imediatamente acima deste código, adicione esse outro código.

.post-body, .entry-content, .entry-summary {font: normal normal 12px Arial !important;}
Agora vejamos o que você pode fazer com o código acima:

  • Primeiro normal: o primeiro normal, indica se o texto aparecerá ou não em itálico. Caso você queira que o texto esteja em itálico por padrão, mude a palavra "normal" para "italic".
  • Segundo normal: o segundo normal, indica se o texto deverá aparecer em negrito ou não. Caso você queira que o texto apareça automaticamente em negrito em todos os seus artigos, mude a palavra "normal" para "bold".
  • Tamanho da fonte: você pode mudar o tamanho da fonte alterando o valor 12. valores maiores irão aumentar o tamanho da fonte e valores menores irão diminuir o tamanho da fonte.
  • Estilo da fonte: através desse código, você pode especificar que tipo de fonte você deseja utilizar para o texto dos seus artigos, a mais usada é a fonte Arial. Caso queira alterar essa fonte para outra de sua preferência troque o nome "Arial" para qualquer outro dessa lista fornecida pela equipe do Blogger.
4. Para finalizar clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Note que se você estiver usando um template dinâmico, você não poderá clicar sobre o botão "Editar HTML" para adicionar o código que foi mostrado acima, portanto, deverá clicar no botão Personalizar, e em seguida ir no menu Avançado > Adicionar CSS e colar o código dentro do campo indicado. Em seguida finalize a customização clicando no botão Aplicar ao blog.

Caso você queira utilizar mais de uma das customizações fornecidas neste artigo, você pode juntá-las em um único código para reduzir o tamanho do seu arquivo CSS e o tempo de carregamento do seu blog. Ficaria algo como o mostrado abaixo.

.post-body, .entry-content, .entry-summary {
    font: normal normal 12px Arial !important;
    text-align: justify !important;
    line-height: 2 !important;
}

Com essas mudanças os seus leitores conseguirão ler mais confortavelmente os seus artigos — e a visão deles agradece!

Todos os códigos fornecidos neste artigo foram testados nos templates oficiais do Blogger, inclusive nos templates dinâmicos, portanto, caso você use um template criado por terceiros os códigos poderão não funcionar. Nesse caso deixe um comentário informando o que houve de errado. Note também que esse código não é "fixo", portanto, se você mudar de template ele será apagado e você terá de adicioná-lo novamente.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 4 comentários neste artigo!

  1. Respostas
    1. Olá Igor, fico feliz que tenha gostado da dica! E muito obrigado por prestigiar a volta do blog com seu comentário! Volte sempre, abraços.

      Excluir
  2. Muito bom! É sempre bom manter os leitores confortáveis em nossos blogs. Ah, e que bom que está de volta! Esperamos, quem sabe, uma bela parceria!

    ResponderExcluir
  3. Maravilhoso a dica, funcionou perfeitamente no meu blog. Muito obrigada, tu me salvou!
    http://dezesseispensamentos.blogspot.com.br

    ResponderExcluir