Destacar uma parte do texto

Em diversas ocasiões queremos dar destaque para um trecho de nosso texto, então às vezes usamos o texto em negrito ou itálico, porém existe outro jeito bem simples e muito melhor para deixar uma parte do texto bem diferente de todo o resto.

Fazendo uma caixa de outra cor com essa parte que vamos dar destaque, o código é assim:

<div style="width: 300px;padding: 3px;border: 1px solid #000000;background-color: #CCCCCC;">Seu texto escrito aqui</div>


Para deixar essa caixa de texto em destaque do jeito que combine melhor com o seu blog, vamos entender como modificar o código.

width: 300px largura da caixa se quiser pode apagar essa linha e a caixa ficará com a maior largura possível.
padding: 3px margem entre o texto e as bordas
border: 1px solid #000000 espessura, estilo e cor das bordas, vejam mais sobre como fazer e alterar bordas.
background-color: #CCCCCC; cor de fundo veja o código de outras cores.

Então seguindo essas explicações fica fácil modificar a formatação dessa caixa de texto em destaque no seu blog, você pode usar isso nas colunas ou nas postagens do blog e se quiser pode até colocar imagens dentro da caixa, apenas observe para a largura da imagem não ser maior do que a própria caixa.

Veja também:
Dar Destaque em uma Parte do Texto (blockquote)
Formatar texto(negrito, itálico, tamanho e tipo de letra)
Efeito semi transparente em imagens

19 comentários :

  1. Olá Fabiano!!
    Acabei agora mesmo de testar a tua dica e funciona muito bem.
    Em vez de realçar um trecho de texto, aproveitei para pôr uma imagem em gif, e o resultado final ficou muito bom.
    Se tiveres um pouco de tempo, vê como ficou e diz-me se preciso modificar alguma coisa.
    Um abraço.

    ResponderExcluir
  2. ficou legal com a imagem, se quiser poderia mudar a cor de fundo ou estilo da borda como falei na postagem, mas isso é uma questão do que você acha que combina mais com o seu blog

    ResponderExcluir
  3. e tem rasão fabiano Quando passamos um ano ou dois mexendo com códigos e coisas difíceis que só o blogger proporciona Parassem bem mais simples que o começo
    Não acha?

    ResponderExcluir
  4. o pior que no meu caso preciso ter cuidado para não escrever explicações muito resumidas pois muita gente precisa de todos os detalhes para conseguir modificar algo no blog. Hoje esse é um dos meus maiores desafios

    ResponderExcluir
  5. Oi Fabiano, como se faz o efeito "tachado simples" no blogger?
    Obrigada!

    ResponderExcluir
  6. Yara
    apenas coloque isso na parte que desejar usar o tachado

    text-decoration: line-through;

    por exemplo nos links quando o mouse está sobre eles a:hover{text-decoration: line-through;}

    ResponderExcluir
  7. Oi Fabiano, muito atencioso da sua parte ter ido me responder. Obrigada, tá?
    Descobri seu site ontem e já usei várias dicas suas.
    Incrível, você faz tudo parecer fácil! Rsrs!
    Ainda ficou a dúvida: coloco esse código (text-decoration: line-through) entre colchetes ou algo assim? Duas vezes (antes de depois da palavra que eu quero "tachar")?
    Obrigada mais uma vez.

    ResponderExcluir
  8. Fabiano, fiz alguns testes hoje (após algumas horas de sono - rsrs) e não consegui.
    Não acredito! Fui capaz de "desenrolar" coisas mais difíceis... aposto que isso é moleza. Só não peguei o macete ainda...

    ResponderExcluir
  9. o jeito que falei seria para usar em todos os links, mas se quiser apenas algumas palavras tachadas, use o código assim:

    <span style="text-decoration:line-through">seu texto aqui</span>

    ResponderExcluir
  10. Uhuuu!
    Deu certo!!!
    Valeu, garoto! ;)
    Beijo

    ResponderExcluir
  11. os comentarios não se alinham Ex:
    Troquinha:
    Parceira:
    Entrega:

    no meu blog fica assim troquinha parceira entega, tudo junto na mesma linha e em letras minusculas

    ResponderExcluir
  12. Fabiano
    Eita que hoje eu tô com sorte(ou paciencia!!!rsrsrs)e acabei de descobrir mais uma dica fantastica em seu site-blog.
    Brigadão querido!
    Coloca um PagSeguro nos finais das postagens para a galera te depositar ao menos 5 reais ao mes.
    Você merece querido!!!
    Cheirooo

    ResponderExcluir
  13. ola gostaria que a cada postagens vcs tivessem mais exemplos visuais de cada dica, pq as vezes sao tantas que nao sei o que cada uma faz e fazer uma por uma apenas para ver o que isso faz é um pouco massante. Pq, fica a sugestão, nao pegam um gif sei la ou link para a pessoa ver o EXEMPLO de como fica o codigo e pra que serve?
    obrigado

    ResponderExcluir
  14. wagner
    nas postagens mais recentes estamos colocando paginas de exemplos, mas muitas de nossas postagens ainda não tem isso, mas vamos estamos revendo as publicações mais antigas também.

    ResponderExcluir
  15. Me ajudou muito !!
    correiatec.com.br

    ResponderExcluir
  16. Eu gostaria de saber como "destacar" o HTML igual você fez no "Link desta página".Obrigado pela atenção!

    ResponderExcluir