A caixa de códigos é muito usada para sites/blogs que disponibilizam algum formato de código para seus visitantes poderem copiar e colar.
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.
LEMBRANDO: Esta caixinha que estou postando aqui será para uso apenas no blogger / blogspot.
Para criarmos a caixa de códigos, é necessário incluir um código CSS no HTML do modelo de seu Blogger.
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; (ENDEREÇO-DA-IMAGEM OU CÓDIGO DA COR) border:1px solid #000000;
color:#XXXXXX; /* cor da fonte*/
font-size:90%;
height:150px;
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
