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 codigo 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:


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.
6 Maneiras de Publicar Codigos HTML nos Posts 6 Maneiras de Publicar Codigos HTML nos Posts Reviewed by Áurea on 11/25/2012 Rating: 5

11 comentários:

  1. Eu sempre coloco as tags code e/ou pre antes do texto.

    ResponderExcluir
  2. Ei Cidão,
    Agora entendi. Você usa-os colocando um comando css no template do blog como o blockquote.
    Vou falar sobre esta opção neste post!
    Obrigada pela Dica!

    ResponderExcluir
  3. mas o blogger em rascunho ou blogger draft ja possui um sistema qe voce pode opitar por
    (Interpretar HTML digitado)
    (Mostrar HTML literalmente)
    simplesmente clike em
    (Opções de postagem)
    qe esta la as opções

    ResponderExcluir
  4. Olá,
    Como vc cria um link, com o nome do blog, que ao clicar vc é direcionado para ele? Gostaria de criar um para mim, mas não sei como.
    Obrigado.

    ResponderExcluir
  5. G Delavechia- Use a linha de comando: <a href="URL do Site"> Nome do site </a> para criar o link.
    Se você quiser direcioná-lo para outra página ou aba que não a sua use o target="_blank" ficando assim: <a href="URL do Site" target="_blank"> Nome do site </a>.

    ResponderExcluir
  6. galera tem outra maneira usando o dreamweaver, coloque o codigo na ediçao vizualização do projeto, ou seja na edição normal do dreamweaver, depois clica em mostrar visualização do codigo, feito isso é so selecionar o codigo e colocar na edição do html do blogger...

    ResponderExcluir
  7. foi de grande ajuda seu post me ajudou muito deveria ter mais blog como este

    ResponderExcluir
  8. oi boa tarde legal gostei das dicas obrigada. lourdes

    ResponderExcluir
  9. Eu não consegui fazer a opção 5, mesmo eu colocando o código, ele transforma
    e fica como na widget/gadget não sei mais o que faço.

    ResponderExcluir
  10. Olá, Áurea!

    Muito bom este artigo! Ele caiu como uma luva para mim, porque às vezes preciso publicar códigos HTML em meus artigos e nem sempre tenho uma solução satisfatória à situação.

    Vou guardá-lo em meus Favoritos para referência futura!

    E obrigado por citar o meu artigo! O Windows Live Writer é mesmo uma ferramenta fantástica, e sempre o utilizo para escrever meus textos.

    Um abraço!

    Adelson Smania

    ResponderExcluir
  11. @gerenciandoblog.com.brOlá Adelson,
    Fico muito feliz que este artigo tenha sido útil para você.
    Já estou usando o Live Writer e estou gostando muito!
    Grande abraço.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.