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 posts que contenham códigos HTML:

1- Para representar as chaves [ < ] e [ > ]

Devemos usar os recursos:
» &lt; para <
» &gt; para >

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.

3- Você pode usar o editor de posts Zoundry

Facilita demais a edição de códigos HTML, além da criação de posts e organização dos mesmos e dos blogs.
É possível criar os posts nele e depois corrijir 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 Windows Live Writer

Este editor é muito bom e utilizado por muitos blogueiros experientes.
Já utilizei-o mas ainda não largei do blogger.
Preciso mudar pois estou vendo que publicar tudo aqui pelo editor do blogger me atrasa muito e precisamos de mais agilidade para produzir melhor.
Você pode aprender melhor sobre ele neste post do Adelson do Gerenciando Blog:
♦Utilizando o Live Writer para escrever em seu blog

5- Existe 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 < e >

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.