Tutorial - Estilo diferente para códigos da postagem

Estava planejando falar sobre um assunto completamente diferente hoje, mas como até eu estava sentindo tédio antes mesmo de escrever, resolvi que é melhor não arriscar não ter acesso, não em tempos de crise... Hehehe...
Ao invés disso, trago um tutorial super simples, que pode ser útil às vezes. A maioria dos blogueiros prefere adicionar códigos HTML a uma postagem em uma citação, e colocam o estilo da citação de forma personalizada. Eu, particularmente, não gosto muito dessa pratica; primeiro pois eu uso a citação para várias outras coisas; e segundo pois gosto sempre de combinar as cores da postagem com a imagem que a encabeça.
O código a seguir é bem simples e não precisa ser acrescentado no HTML do template, ou seja, o risco de dar algo errado é zero. Se você o fizer certo, ficará mais ou menos assim:

exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo

E você poderá usá-lo com qualquer texto que quiser, não apenas com códigos.

Estilo diferente para códigos da postagem:

Primeiro explicarei o código, depois darei alguns exemplos já prontos para servir de inspiração para vocês, OK?
Antes de tudo, escreva sua postagem normalmente, acrescentando à ela os códigos que você quer destacar.
Depois que tudo esteja escrito, clique no botão "HTML" (que fica ao lado de "Escrever", no canto superior esquerdo do editor de postagens) e procure o texto que você quer modificar. Antes dele, cole o seguinte código:

<div style="background: #eee; border: 1px solid #ccc; padding: 10px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow: 3px 3px 3px #ccc inset; -moz-box-shadow: 3px 3px 3px #ccc inset; -webkit-box-shadow: 3px 3px 3px #ccc inset;">

E exatamente onde o texto acaba, escreva </div>
Agora clique em "Escrever". Repare que o texto escolhido já está completamente no estilo desejado! Viu como é fácil?
A parte que eu destaquei em negrito é a que dá estilo ao texto que será modificados. Você pode adicionar aí quantos códigos quiser, de acordo com seus conhecimentos, basta colocá-los antes das aspas fecharem.
Abaixo, colocarei alguns outros códigos, veja como há uma boa gama de possibilidades:

<div style="background: #D6E3EE; padding: 10px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">

<div style="background: #ccc; border: 1px dashed steelblue; padding: 10px;">

<div style="background: #eee; border: 6px double #666666; padding: 10px; border-radius: 20px 0px 20px 0px; -moz-border-radius:  20px 0px 20px 0px; -webkit-border-radius:  20px 0px 20px 0px;">

E por aí vai... Divirta-se colocando seus textos da forma que você quiser! Só não se esqueça de colocar </div> depois do texto!!!

Espero que tenha sido útil, amanhã teremos "Capas para Twitter", não perca!!!

Mil Sweetkisses,