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 < 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.
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 <> dentro das chaves
<pre><code><CÓDIGO></code></pre>Vamos Lá!
1º - Em Modelo → Editar HTML → Coloque os códigos abaixo acima da linha ]]></b:skin>
}
pre {
background:transparent url(http://i34.tinypic.com/15p0krm.jpg) no-repeat 0 0;
padding-left:12px;
}
pre code {
overflow:auto;
background:#FAFAFA url(http://i41.tinypic.com/20a76s8.jpg) top left;
border:1px solid #555;
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: É isso vamos para o próximo.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:
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.
Bom Galera é isso ai. espero q tenha gostado, se gosto assine nossos feed gratis e recebe novidade no email. valew abrass.
Fonte: templatesparavoce
