Destacar uma parte do texto - Dicas para Blogs
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.
Formatar texto(negrito, itálico, tamanho e tipo de letra)
Efeito semi transparente em imagens
Lucaimura 18 maio, 2009 13:16
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.
Fabiano Roberto 18 maio, 2009 15:27
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
(¯`·._.·[Satoshi_Ash]·._.·´¯) 20 maio, 2009 19:28
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
Fabiano Roberto 21 maio, 2009 14:53
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
Yara 27 julho, 2009 01:21
Oi Fabiano, como se faz o efeito "tachado simples" no blogger?
Fabiano Roberto 27 julho, 2009 02:38
apenas coloque isso na parte que desejar usar o tachado
por exemplo nos links quando o mouse está sobre eles a:hover{text-decoration: line-through;}
Yara 27 julho, 2009 02:50
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")?
Yara 27 julho, 2009 11:35
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...
Fabiano Roberto 27 julho, 2009 13:59
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>
Yara 28 julho, 2009 14:45
Valeu, garoto! ;)
cely 26 agosto, 2009 12:10
os comentarios não se alinham Ex:
no meu blog fica assim troquinha parceira entega, tudo junto na mesma linha e em letras minusculas
Fabiano Roberto 26 agosto, 2009 16:58
para mudar de linha coloque
Allan Fixnet Uster 05 abril, 2010 20:57
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!!!
wagner 13 junho, 2010 16:07
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?
Fabiano Roberto 13 junho, 2010 17:58
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.
Paulo Correia 01 abril, 2012 23:01
Anônimo 24 abril, 2012 13:58
Eu gostaria de saber como "destacar" o HTML igual você fez no "Link desta página".Obrigado pela atenção!