6 Maneiras de Publicar Codigos HTML nos Posts

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

Você já deve ter visto que quando vamos publicar códigos em HTML precisamos de um de outro código para que as tags que ficam entre as chaves < > possam aparecer corretamente no post.

Eu vou listar abaixo 6 maneiras de como publicar os códigos que contenham códigos HTML:

1 - Para representar a chave < devemos usar o recurso &lt; e para a chave > o recurso &gt;

2 - Você também pode usar o site Blogcrowds onde podemos colocar o código HTML no quadro clicar em PARSE que ele já dá o código pronto com os recursos &lt; e &gt; já aplicados. (Veja a figura)

3 - Atualmente estou usando o editor de posts Zoundry que facilita demais a edição de códigos HTML, além da criação de posts e organização dos mesmos e dos blogs.
Crio os posts nele e depois corrijo aqui no blogger para diminuir espaços entre linhas e outras coisas, mas para publicar códigos é excelente.
Cheguei até este editor pelo Blosque.

4 - Tem o Blogger Draft que até hoje não me adaptei muito, mas a Ariane ensina como usá-lo para publicar códigos HTML literalmente neste Post.

Update em 08/12

5 - Como o Cidão comentou há a opção de usar o recurso das tags <pre> + <code>, onde você coloca no CSS do código HTML do seu blog as definições para estas tags e as utiliza quando for publicar códigos, não se esquecendo de usar os recursos &lt; e &gt; para < e > dentro das chaves

<pre><code>&lt;CÓDIGO&gt;</code></pre>

Como Fazer?

1º - Em Modelo → Editar HTML → Coloque os códigos abaixo acima da linha ]]></b:skin>

pre {
background:transparent url(Endereço da Imagem do Código) no-repeat 0 0;
padding-left:12px;
}
pre code {
overflow:auto;
background-color:#F9F9F9;
border:1px solid silver;
color:#333;
font:normal normal 110% Arial, sans-serif;
display:block;
white-space:pre;
text-align:left;
min-height:63px;
word-wrap:break-word;
padding:5px;
}

2º - Feito isso, quando você for publicar algum post que contenha códigos utilize as tags <pre><code>CÓDIGO</code></pre> na parte Editar Html durante a edição do seu post. Desta forma ficará igual ao quadro acima.

3º - Salve esta imagem em seu computador, hospede-a em um site de sua preferência e substitua o endereço da imagem no código acima:

6 - Temos outra opção, a de usar o recurso <textarea>.
Quando usamos este recurso não é preciso usar &lt; e &gt;para as tags < e >
Ficando assim:
Digite o Código com as tags <> sem o recurso &lt; e &gt;

Para isso, utilize em Editar Html quando estiver criando seu post as tags:

<textarea rows="6" cols="65" onfocus="this.select()" onmouseover="this.focus()" name="textarea">Código HTML</textarea>

Onde:
rows="6" significa quantas linhas seu quadro vai ter → Altura
cols="65" significa quantas colunas seu quadro vai ter → Largura
Você pode editá-los como preferir no Html do seu post.

No post Blockquote e Caixinha de Códigos já ensinei outra maneira de publicar códigos no posts dentro de uma caixinha que os destaca.