Image Image Image Image Image
Scroll to Top

Topo

26

mar
2012

Sem Comentários

Em Blog

Por Allison

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

Em 26, mar 2012 | Sem Comentários | Em Blog | Por Allison

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

Fonte: CriarSites

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.

Espero ter ajudado muito vocês!

Redes Sociais

Tags | , ,

Enviar um Comentário