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 < < e para a chave > o recurso >
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 < e > 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.
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 < e > para < e > dentro das chaves.
<pre><code><CÓDIGO></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 < e >para as tags < e >
Ficando assim:
<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
Fonte: http://www.templatesparavoce.com/2008/12/como-publicar-codigos-html.html