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, oCriarSites.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!