Como criar uma caixa para exibir códigos dentro de suas postagens

Uma caixa de código é bastante utilizada por blogueiros que publicam códigos como html, css entre outros para serem copiados por seus usuários, tiro como exemplo este meu blog. A caixa de códigos possibilita que os seus leitores saibam o que é texto e o que é código, não tirando a originalidade do mesmo.

Mas, muitos blogueiros ainda publicam seus códigos dentro de um blockquote, por exemplo, acontece que se o código for muito grande, as suas publicações também sofrerão este efeito. Só que agora depois de ler estas postagens, seus pensamentos não serão os mesmo em relação a isto.

Tenho portanto uma forma mais elaborada e diferenciada sem que você precise usar o blockquote em tudo. Vou lhe explicar o por que disso. Particularmente eu prefiro usar o blockquote apenas para destacar um texto, como nota, citação ou até mesmo um código bem pequeno. Esse é o meu caso pra você pode ter outras funções também, certo!

Agora chega de lero lero e passamos para melhor parte.

Bom, a primeira coisa a fazer para implantar esta caixa é ir
ao TEMA depois em Editar Html, dá um clique dentro da caixa de códigos do seu blog e quando aparecer a caixa de busca procurar pelo trecho ]]></b:skin> e depois de encontrar esse trecho colar o código que está aqui em baixo logo acima dele e salvar.

code{ overflow:auto; /* barra de rolagem*/ background:#000000 url(ENDEREÇO-DA-IMAGEM) ; /* edite cor de fundo*/ border:1px solid #000000; /* edite cor e tipo de borda */ color:#ffffff; /* cor da fonte*/ font-size:80%; /* tamanho da fonte */ height:100px; /* edite a altura máxima da caixa*/ display:block; white-space:pre; text-align:left; word-wrap:break-word; padding:0 10px 5px 20px; }

Observações:

• No código acima eu determinei que a caixa tenha uma barra de rolagem. O comando overflow: auto; faz aparecer a barra de rolagem automaticamente, apenas se altura da caixa ultrapassar os 100px. Se você quiser, edite a altura máxima da caixa.
• Se você não quiser barra de rolagem, simplesmente apague este trecho do código.
• Se quiser acrescentar uma imagem ao plano de fundo, coloque a url da sua imagem onde está “ENDEREÇO-DA-IMAGEM”.

Use minha Tabela de cores HTML para personalizar a caixa com as cores de sua preferência.

Aprendendo a usar a caixa de códigos:

Toda vez que você publicar códigos nas suas postagens, você precisará incluir a tag que o blogger reconheça a caixinha que você acabou de criar que são as seguintes

<code> no início e </code> no final do código.

Esta tag de abertura e fechamento é adicionada no modo “HTML” da sua postagem.

Você deve inserir os códigos que você quer exibir na sua postagem entre as tags:<code> e </code>

Como mostra a imagem abaixo eu até usei o próprio código deste tutorial como exemplo:

Basicamente é isso galera, espero que tenha te ajudado e sei que isso vai enriquecer ainda mais o seu blog / site. Até a próxima.