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
caixa passar de 150px.
Se você quiser, edite a altura da caixa editando os números da parte height: 150px;
Se você deseja colocar uma imagem de plano de fundo, depois do trecho do código: backgroundo: #E8E8E8 – (ENDEREÇO-DA-IMAGEM OU CÓDIGO DA COR) ; e modifique a parte ‘ENDEREÇO-DA-IMAGEM OU CÓDIGO DA COR’ pela URL da imagem de fundo que você deseja colocar ou cor que você poder escolher aqui .
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.
ESPERO TER AJUDADO E NÃO ESQUEÇA DE COMPARTILHA O SITE E SEGUI-NOS POR E-MAIL OU NO PARTICIPAR DO SITE.
ATE + PESSOAL.
Nenhum comentário:
Postar um comentário