Como personalizar o texto publicado nas postagens do blog

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como personalizar o texto publicado nas postagens do blog a partir do uso de alguns códigos CSS e HTML de forma simples, rápida e prática.

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 PERSONALIZAR O TEXTO DE UMA PUBLICAÇÃO?

Confira como adicionar os códigos de personalização nos textos publicados nas postagens a partir dos 10 passos a seguir.

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Postagens.

4º Passo: abra a página de edição da postagem desejada.

5º Passo: altere a visualização do conteúdo para visualização em HTML.

Dica: caso não encontre a opção visualização em HTML, clique no ícone do lápis e altere para o ícone com os sinais <>.

6º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

7º Passo: pesquise pelo trecho que deseja personalizar.

Observação: no código HTML, note que o texto fica entre uma tag de abertura <> e outra de fechamento </> de uma linha, parágrafo ou seção, conforme os exemplos abaixo.

Linha: <span> texto </span>

Parágrafo: <p> texto </p>

Seção: <div> texto </div>

Nas tags de aberturas é possível encontrar um atributo style. Esse atributo é responsável por aplicar um estilo css no texto da tag.

Linha: <span style=""> texto </span>

Parágrafo: <p style=""> texto </p>

Seção: <div style=""> texto </div>

No atributo style, os estilos css podem ser encontrados entre duas aspas e separados por ponto e vírgula, conforme exemplo a seguir.

Linha: <span style="text-align:justify;"> texto </span>

Parágrafo: <p style="text-align:justify;"> texto </p>

Seção: <div style="text-align:justify;"> texto </div>

8º Passo: para personalizar um texto, adicione o código de personalização entre as aspas de um atributo style de uma linha, parágrafo ou seção, conforme o exemplo a seguir.

Exemplo 01: Aplicando estilo justificado em uma linha.

<span> texto </span>

<span style=""> texto </span>

<span style="text-align:justify;"> texto </span>

Exemplo 02: Aplicando estilo sombra em um parágrafo.

<p> texto </p>

<p style=""> texto </p>

<p style="text-shadow:0px 0px 5px #000;"> texto </p>

Exemplo 03: Aplicando a cor azul e o tamanho 15 no texto de uma seção.

<div> texto </div>

<div style=""> texto </div>

<div style="color: blue;font-size:15.0pt;"> texto </div>

9º Passo: para conferir o resultado, altere a visualização do conteúdo para visualização escrever.

Dica: clique no ícone com os sinais <> e selecione a opção com o ícone do lápis.

10º Passo: após a conferência, clique em atualizar.

PRINCIPAIS CÓDIGOS PARA PERSONALIZAÇÃO DE TEXTO

Texto em itálico: aplique o estilo itálico ao texto por meio da tag <i></i> ou através do código: font-style: italic;

font-style: italic;

 

Texto em negrito: aplique o estilo itálico ao texto por meio da tag <b></b> ou através do código: font-weight: bold;

font-weight: bold;

 

Texto sublinhado: aplique o estilo sublinhado ao texto por meio da tag <u></u> ou através do código: text-decoration: underline;

text-decoration: underline;

 

Texto centralizado: aplique o alinhamento centralizado no texto de um parágrafo ou de uma seção através do código: text-align: center;

Clique aqui para conferir um tutorial mostrando detalhadamente como centralizar os títulos do blog.

text-align: center;

 

Sombra no texto: aplique sombra no texto através do código: text-shadow: 0px 0px 5px #9bc9e7;

Clique aqui para conferir um tutorial mostrando detalhadamente como adicionar e personalizar a sombra nos textos das publicações, bem como nos textos dos títulos das postagens, dos widgets e do cabeçalho do blog.

text-shadow: 0px 0px 5px #9bc9e7;

 

Plano de fundo com cor sólida: altere o plano de fundo de um texto com uma cor sólida através do código: background-color:blue;

Clique aqui para conferir uma lista de códigos hexagonais que podem ser aplicados no local da cor inicial. Para tanto, deve substituir o trecho blue pelo código da cor desejada.

background-color:blue;

 

Plano de fundo com imagem: altere o plano de fundo de um texto com uma imagem através do código: background: url(URL DA IMAGEM) top center no-repeat;

Clique aqui para conferir um tutorial mostrando detalhadamente como alterar o plano de fundo das postagens e dos widgets do blog.

background: url(URL DA IMAGEM) top center no-repeat;

OUTROS CÓDIGOS PARA PERSONALIZAÇÃO DO BLOG

Botão flutuante no blog: os botões flutuantes são imagens com links que flutuam sobre os demais elementos do blog. Para adicionar esse elemento no seu blog, copie o código abaixo e cole em um widget HTML/JavaScript ou também, acima da tag </body> do HTML do seu blog ou ainda, junto ao conteúdo HTML de uma página do seu blog e por fim, substitua o trecho URL DA IMAGEM. Também é possível alterar o link do botão substituindo o trecho # pelo URL do link desejado.

Clique aqui para conferir um tutorial mostrando detalhadamente como adicionar o botão flutuante no seu blog.

<div style='float:right;'> <a href='#'> <img src='URL DA IMAGEM' style='display:scroll; position:fixed; bottom:5px; right:5px;' title='Topo'/> </a> </div>

 

Imagem flutuante no blog: as imagens flutuantes são elementos similares ao anterior, porém não possuem link. Para adicionar esse elemento no seu blog, deve ser realizado o mesmo procedimento do elemento anterior.

<div style='float:right;'> <img src='URL DA IMAGEM' style='display:scroll; position:fixed; top:5px; right:5px;'/> </div>

 

Texto flutuante no blog: os textos flutuantes são semelhantes aos botões flutuantes, porém no local da imagem possui texto. Para adicionar esse elemento no seu blog, deve ser realizado o mesmo procedimento do botão flutuante. Também é possível personalizar o texto utilizando os mesmos códigos css descritos acima, porém devem ser incluídos dentro do atributo style do código abaixo. Além disso, é possível modificar o link abaixo, substituindo o trecho # pelo URL do link desejado.

<div style='float:right;'> <div face='Arial, sans-serif' style='font-size: 10pt; color: black; display:scroll; position:fixed; bottom:5px; right:5px;'>Obrigado pela visita! | <a href='#'>Clique aqui para retornar ao topo</a></div> </div>

 

Menu suspenso no blog: esse menu exibe uma lista flutuante de links ao ser clicado. Para adicionar esse elemento no seu blog, copie o código abaixo e cole em um widget HTML/JavaScript ou junto ao conteúdo ao conteúdo HTML de uma página do seu blog e por fim, substitua cada trecho # pelo URL do link desejado e cada número pelo texto que será exibido no link.

Clique aqui para conferir um tutorial mostrando detalhadamente como um menu suspenso com lista de links personalizados no seu blog.

<select id="menuSusp" onchange="window.location.href=this.value;"> <option value="#">1</option> <option value="#">2</option> <option value="#">3</option> <option value="#">4</option> <option value="#">5</option> </select>

 

Botão exibir e ocultar: esse botão permite exibir ou ocultar um conteúdo de texto, imagem ou outro similar. Para adicionar esse elemento, copie o código abaixo e cole em um widget HTML/JavaScript ou junto ao conteúdo HTML de uma página do seu blog e por fim, substitua o trecho SEU TEXTO pelo texto que será mostrado quando o botão for clicado. Além de texto, também é possível adicionar conteúdo de imagem, vídeo, tabela, entre outros.

Clique aqui para conferir um tutorial mostrando detalhadamente como adicionar a função exibir e ocultar conteúdo através de um link ou de uma imagem.

<div id="spoiler" style="display: none;"> <pre> SEU TEXTO </pre> </div> <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Clique para exibir ou ocultar o conteúdo">Exibir/Ocultar</button>

 

Tabela: adicione uma composta por uma linha e uma coluna com plano de fundo e borda na cor prata. Para adicionar a tabela, copie o código abaixo e cole em um widget HTML/JavaScript ou junto ao conteúdo HTML de uma página do seu blog e por fim, substitua o trecho SEU TEXTO pelo texto que será mostrado na célula. A tag <tr> define uma linha e dentro dela, a tag <td> define uma célula. Nesse sentido, para inserir uma nova coluna, copie todo conteúdo da tag <td></td> e cole entre </td> e </tr>. Já para inserir uma nova linha copie todo conteúdo da tag <tr></tr> e cole entre </tr> e </tbody>.

<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid #BFBFBF .5pt; mso-border-insideh-themecolor: background1; mso-border-insideh-themeshade: 191; mso-border-insideh: .5pt solid #BFBFBF; mso-border-insidev-themecolor: background1; mso-border-insidev-themeshade: 191; mso-border-insidev: .5pt solid #BFBFBF; mso-border-themecolor: background1; mso-border-themeshade: 191; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-yfti-tbllook: 1184;"> <tbody><tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0; mso-yfti-lastrow: yes;"> <td style="background: #F2F2F2; border: solid #BFBFBF 1.0pt; mso-background-themecolor: background1; mso-background-themeshade: 242; mso-border-alt: solid #BFBFBF .5pt; mso-border-themecolor: background1; mso-border-themecolor: background1; mso-border-themeshade: 191; mso-border-themeshade: 191; padding: 0cm 5.4pt 0cm 5.4pt; width: 424.7pt;" valign="top" width="566"> <p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">SEU TEXTO<o:p></o:p></p> </td> </tr> </tbody></table>

 

Incorporação: incorpore uma imagem, um conteúdo de um arquivo hospedado na nuvem e até um outro site completo através de um elemento iframe. Para realizar essa incorporação, copie o código abaixo e cole em um widget HTML/JavaScript ou junto ao conteúdo HTML de uma página do seu blog e por fim, substitua o trecho URL pelo do conteúdo que será incorporado.

<iframe border="0" frameborder="0" height="200" scrolling="yes" src="URL" width="750"></iframe>

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a personalização simples, rápida e prática do texto publicado no blog através do uso de alguns códigos CSS e HTML.

 

Por: Santos. Elaborado em: 16/01/2026. Publicado em: 16/01/2026. Atualizado em: 16/01/2026. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.