Como Destacar (Formatar) Partes Importantes do Texto dos Posts

Para dar destaque em alguns trechos da postagem podemos usar fonte em negrito ou itálico ou usar a ferramenta blockquote, mas também é possível criar um estilo CSS personalizado para destacar partes do texto do blog que tem muito mais vantagens do que fazer a formatação em cada post para realçar aquela parte importante do seu texto.

Formatar o Texto na Pagina de Criação da Postagem


Quando você vai publicar uma nova postagem no seu blog existem ferramentas para formatar o texto: mudar a cor, tamanho, tipo de letra, cor de fundo e outras, porém não recomendamos formate o texto com elas.

Destacar Trechos das Postagens do Blogger

O motivo é simples se futuramente resolver mudar o template (principalmente as cores) do seu blog e esses trechos que você formatou precisarem ser modificados você terá que fazer um por vez, ou seja, precisa editar cada postagem para trocar a cor da fonte.

Leia também:
Configurações e Ferramentas do Blog para Fazer Novas Postagens
Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F

Por isso achamos mais recomendável criar estilos CSS para dar uma formatação especial a partes do seu texto.

Destacar Partes do Texto usando CSS


Usar CSS para formatar trechos da postagem se divide em duas partes: Criar o estilo com a Formatação de texto que deseja e depois aplicar essa formatação nos trechos do texto do seu post.

Criar estilos CSS no Blogger


Entre na pagina modelo > personalizado > avançado > role o menu até chegar ao item adicionar CSS.

Colocar CSS no Blogger

Agora na caixa que aparece cole o código:

.destaque {color: #000}

Isto é apenas uma demonstração no seu blog você poderá formatar o que desejar neste estilo: tipo de fonte, tamanho das letras, cor de fundo, Colocar Bordas e varias outras coisas possíveis de fazer com CSS. Veja os links abaixo para ajudá-lo a fazer esse trecho do nosso tutorial:
Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS

Caso queira criar vários tipos de destaque diferentes você poderia criar outro usando o nome:

.destaque1 {...}
.destaque2 {...} e assim por diante poderá criar quantos estilos quiser. Quando desejar modificar a cor ou qualquer outra coisa você entrará nesta pagina onde estão os estilos CSS para fazer suas alterações e assim que salvar a formatação se modificará em todos os posts que aplicou esse destaque.

Destacar partes do Texto da Postagem


Para aplicar essa formatação que criamos é bem simples quando estiver criando sua nova postagem use a guia HTML e digite o seguinte código:

<span class="destaque">seu texto aqui</span>

O mais importante aqui é a palavra: destaque que é o nome do estilo, ou seja, se escrever uma letra errada nela não funciona!

Veja um exemplo de frase que poderíamos usar numa Nova Postagem:

Dicas para criar blogs e <span class="destaque">ganhar dinheiro na internet </span> trabalhando apenas algumas horas por dia.

Como pode notar a parte com formatação especial é o texto ganhar dinheiro na internet. Esperamos que aproveitem essa dica para formatar de maneira mais fácil o texto do seu blog.

20 comentários :

  1. mas tem que colocar o código spam toda vez que eu quiser destacar uma parte do texto?

    isso dá muito trabalho

    ResponderExcluir
  2. concordo que dá um pouco de trabalho usar código spam nas postagens, mas a grande diferença é que futuramente se quiser alterar esses destaques poderá fazer isso pelo estilo CSS como mostramos nesta imagem:
    http://2.bp.blogspot.com/-wj0YT52oSPs/UsvsDBN8vQI/AAAAAAAAJXc/OrQ-M9h5p4o/s320/colocar-css-designer-modelo-blogger.jpg

    por exemplo se formatar seu texto diretamente nos posts e depois de um tempo ( + de um ano) resolver trocar a cor de fundo do blog ficará preso aquelas postagens com texto formatado ou terá que editar cada uma delas para mudar as cores



    ResponderExcluir
  3. Esse blog é muito bom! Devo muito a vocês por eu ter construído o meu.
    Só uma coisa: vocês não colocam mais uma imagem de exemplo nos tutoriais.

    Abraços.

    ResponderExcluir
  4. no caso deste tutorial achei que só essas imagens eram o suficiente ... mas vou procurar usar mais imagens afinal fica mais fácil entender vendo as fotos

    obrigado pela sugestão

    ResponderExcluir
  5. E tinha que ter uma imagem de exemplo pra ver como fico depois de inserir os codigos...

    ResponderExcluir
  6. Olá, Fabiano! Qual código de destaques mais variados, ou seja, com mais opções de variação, podemos colocar na caixa de Modelo>Avançado>Estilo CSS?

    ResponderExcluir
  7. Muito bom seu blog! Parabéns! Você nos dá uma mão muito grande com suas dicas!

    ResponderExcluir
  8. Fabiano, eu queria que os comentarios do meu blog no blogger aparecessem em uma caixa de comentarios assim como no Dicas Para Blogs. Mas mesmo depois de aprovados eles não aparecem. O Blogger é assim mesmo? Só aparece no rodapé da guia de postagem escrito Um comentário.

    ResponderExcluir
  9. Claudio
    para aparecer igual ao nosso formulário de comentário entre na pagina configurações > postagens e comentários

    nela tem o item local dos comentários, escolha a opção incorporado.

    ResponderExcluir
  10. sobre criar estilos variados de destaque você pode criar quantos quiser, apenas altere o nome do estilo e pode colocar todos na caixa adicionar CSS como você falou.

    ResponderExcluir
  11. destaque é apenas um nome do estilo...

    se quiser fazer varios crie destaque1 , destaque2... e assim por diante

    ResponderExcluir
  12. Muito obrigado por suas respostas, Fabiano!

    ResponderExcluir
  13. Olá Fabiano,
    Eu tenho um problema que talvez possa ser resolvido com esse método.
    Toda vez que eu troco o template, o subtítulo das postagens (h2, h3, etc.) fica com um padrão totalmente diferente.
    É possível criar um um estilo CSS personalizado para manter os subtítulos sempre do mesmo jeito, mesmo que eu mude o template?
    Obrigado e grande abraço

    ResponderExcluir
  14. Panorâmica Social

    no caso de subtítulos (h2, h3, ...) além da formatação eles tem a função de ajudar o google identificar o conteúdo do seu site, então é melhor usar os subtítulos do que criar estilos

    mas pode colocar no seu html a formatação do subtitulo, por exemplo:

    h2 {color:#000}

    e fazer a formatação que desejar.

    ResponderExcluir
  15. Olá, Fabiano! Li seu post sobre menu horizontal, e pensei se nele se pode colocar links de páginas que eu venha a criar em meu blog. Fiz uma experiência colocando a guia do blogger com os nomes das páginas acima das guias de postagem. Esta guia do blogger, pela sua função, é igual ao menu que você ensinou a fazer, só que mais simples?

    ResponderExcluir
  16. Claudio

    na verdade um menu são apenas varios links juntos...

    então sim se colocar uma guia com links tem a mesma função do menu

    ResponderExcluir
  17. Olá! Eu estava procurando uma publicação aqui no blog que nos orientasse sobre personalizar o titulo da postagem.

    Conforme a imagem que mostro abaixo, eu desejo colocar uma linha pontilhada abaixo do titulo da postagem, porém não consigo aumentar a distância entre o titulo e a linha [está muito ''colado''!]

    http://4.bp.blogspot.com/-VkC63Fl9R4M/VMwoTVHHYCI/AAAAAAABVd8/8pSZPDD8VHI/s1600/cats.jpg

    E como mostra essa segunda imagem, a linha em vermelho foi a que eu adicionei para colocar o pontilhado. Saberia me orientar, por favor, como fazer isso?

    A opção ''margin'' logo abaixo da linha em vermelho não provocou nenhuma alteração. Talvez um código extra....? Caso ele exista, qual seria exatamente?

    [imagem do código]

    http://4.bp.blogspot.com/-mSMl8rYzIxI/VMwoTvdZ-4I/AAAAAAABVeA/XRQeBJ5keS0/s1600/jjjj.jpg


    Obrigada.

    ResponderExcluir
    Respostas
    1. adicione junto com aquele estilo do h3 o código:
      padding-bottom: 10px;

      e veja se dá o espaço que você quer.

      Excluir
    2. Muito obrigada. Acompanho sempre as suas publicações.

      Excluir