Aprenda como criar caixas para exibir códigos nos posts de seu blog

caixas

Se você tem um site ou blog do nicho de Criação de Sites, blogs, WordPress ou até mesmo ensinando a configurar widgets e/ou blogs, é de extrema importância você ler este artigo!

A caixa de códigos é muito usada para sites/blogs que disponibilizam algum formato de código para seus visitantes poderem copiar e colar, como exemplo aqui, o CriarSites.com.

Não são todos os sites que precisam dessa caixinha, um exemplo é meu Fã Site, como se trata de um artista musical, quase nunca iriai usar este recurso…

Esta caixa de códigos é muito útil, pelo fato de facilitar a vida do leitor, identificando claramente qual parte do artigo é texto e qual parte é um código.

Alguns usuários colocam seus códigos dentro de um ‘blockquote’, mas eu acho bem melhor esta caixa de código, já que seu uso é para isso (para postar códigos claramente).

Para criarmos a caixa de códigos, é necessário incluir um código CSS no HTML do modelo de seu Blogger.

LEMBRANDO: Esta caixinha que estou postando aqui será para uso apenas no blogger / blogspot.

Neste passo a passo você aprenderá a criar a caixa de códigos simples, mas também poderá personalizar com uma imagem de fundo da caixa.

Vamos ao passo a passo?

Como forma de precaução, lhe aconselho a fazer um backup de seu template. Para isso, clique em ‘Design’ e depois em ‘Baixar modelo completo’. Caso algo saia errado nesse tutorial, você poderá restaurar tudo como estava antes, fazendo o upload desse modelo que você baixou.

1.       Vá ao seu painel de seu blogger, clique em ‘Design’ e em ‘Editar HTML’. Não precisa selecionar ‘Expandir modelos de widgets’.

2.       Procure por: ]]></b:skin> e ACIMA dele cole o código abaixo:

code{
overflow:auto;  /* barra de rolagem*/
background: #E8E8E8;
border:1px solid #000000;
color:#XXXXXX;  /* cor da fonte*/
font-size:90%;
height:200px;
display:block;
white-space:pre;
text-align:left;
word-wrap:break-word;
padding:0 10px 5px 20px;
}

3.       Depois clique em ‘Salvar Modelo’.

No código que disponibilizei acima, a caixa irá ter uma barra de rolagem automaticamente se a altura da caixa passar de 200px.

Se você quiser, edite a altura da caixa editando os números da parte height: 200px;

Se você deseja colocar uma imagem de plano de fundo, depois do trecho do código:  backgroundo: #E8E8E8 – Adicione: url(ENDEREÇO-DA-IMAGEM) ; e modifique a parte ‘ENDEREÇO-DA-IMAGEM’ pela URL da imagem de fundo que você deseja colocar.

Agora você me pergunta:

Como eu coloco a caixa de códigos nas postagens de meu site ou blog?

É simples!

Toda vez que você for postar algum código, você deverá incluir uma TAG para que o Blogger reconheça a caixa e o texto que vai ficar dentro dela.

Para isso, basta usar as TAGs <code> marcando o inicio da caixa e </code> marcando o fim da caixa.

E o código que você quer publicar basta você colocar no meio dessas TAGs.

LEMBRANDO: Essas tags devem ser adicionadas no modo ‘Editar HTML’ da caixa de postagem.

Veja como você deve publicar:

<code>

Insira o código aqui

</code>

Faça um teste!

Depois que você editou o HTML do tema de seu Blogger, faça uma postagem usando as TAGs, se der certo tudo bem.

Se não deu, comente aqui e vejamos o que pode ter dado errado!

Espero ter ajudado muito vocês!

Este é um guest post escrito por Dieggo Bezerra que administra o Conexão CL.

Este artigo está participando da promoção de 3 notebooks oferecido pelo CriarSites.com e WRG.

About Diego Bezerra

Tenho 18 anos | Fascinado pelo mundo da blogosfera, pretendo um dia me tornar WebDesigner profissional.
Bookmark the permalink.

8 Comments

  1. Diego, gostei do tutorial, bem explicado.
    Abraços,
    Digo Cabral

  2. Poderiam rever antes dos inúmeros erros de português antes de publicar um artigo.

    Por exemplo “é de extrema importância você lê este artigo” deveria ser “é de extrema importância você LER este artigo!”

    • José Costa, achei sua crítica pouco construtiva. Erros passam despercebidos, somos seres humanos e estamos sujeitos a eles. Conheço um jornalista bem famoso aqui na minha cidade, que me disse uma coisa que eu achei interessante. As vezes agente escreve algo, lê umas 10 vezes, e não encontra nenhum erro. E outra pessoa bate o olho e já enxerga o que está errado. Errar é umano, ta vendo só? errei, mas não vou concertar!

      Abraço!

    • José Costa,
      Revisado.

      Abraço!

  3. Muito boa dica, visto que, a personalização de um blog é um fator importante para atrair leitores, e com certeza, códigos espalhados de qualquer jeito não ficaria “bonito”.

    Adorei “LÊ” este artigo, e achei muito produtivo e importante !.

    “O erro as vezes está aos olhos de quem os procura”.

    Grande abraço !

  4. É bem interessante ter meios de separar os códigos do restante do texto, isso facilita a leitura e ainda melhoram o visual da publicação :D

    Errar na hora de escrever? Ah isso é a coisa mais fácil do mundo, eu já escrevi mais de 3.000 artigos e erro todos os dias rsrs E realmente para quem acabou de escrever é difícil notar o erro, para quem está revizando com foco em um sem fim de outras questões como links, SEO, originalidade do conteúdo, um errinho de português também passa fácil :D
    Abraço!

  5. Pingback: Exibir Código HTML no Conteúdo do Artigo! Permite o Visitante Copiar | Criar Sites Grátis é na RG!

  6. eu fiz tudo certo, a caixca até a parece, mais na hora de por o codigo dentro da caixa, é o codigo de uma imagem de parceria, dai dá errado, em vez do codigo aparece a imagem dentro da caixa… oq eu faço?

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>