Criar caixa para exibir códigos no post

Nossa Avaliação:  
Plataforma: Dicas 
Descrição:Já me perguntaram como criar uma caixa personalizada para exibir os códigos quando publicados dentro do post.
A caixa de código é muito utilizada por blogs que publicam códigos para serem copiados, como é o caso do Mundo Blogger.

É um recurso muito útil, pois facilita que o leitor diferencie o que é texto e o que é código.
Alguns usuários publicam os códigos dentro do blockquote, mas existe uma forma bem melhor e mais personalizada, sem precisar usar o blockquote.

Eu particularmente prefiro deixar o "blockquote" somente para destacar textos, ou fazer alguma observação.

Desta forma cada tipo de conteúdo terá a sua própria caixinha: o que for citação = blockquote, e o que for código = caixa exclusiva para códigos.

Para criarmos a caixa de códigos, precisaremos incluir códigos CSS no template.
Vou disponibilizar 2 modelos de caixa, assim é só você escolher qual prefere usar no seu blog e aplicar os estilos de acordo com o seu gosto.

Neste tutorial veremos o modelo de caixa simples, e no próximo artigo, veremos um outro modelo de caixa mais personalizada.
Vamos ao procedimento:

1. Criar caixa simples para exibir códigos no Blogger:

Entre na aba "design" >>"editar html", não precisa clicar em "expandir modelos de widgets" e procure por:

E cole logo ACIMA dela:


code{
overflow:auto; /* barra de rolagem*/
background:#XXXXXX url(ENDEREÇO-DA-IMAGEM) ; /* edite cor de fundo*/
border:1px solid #XXXXXX; /* edite cor e tipo de borda */
color:#XXXXXX; /* 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;
}
Salve as modificações.

No código acima eu determinei que a caixa tenha uma barra de rolagem.
O comando overflow: auto; faz como que a barra de rolagem apareça 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".
Se quiser utilizar apenas cor para o plano de fundo, sem imagem alguma, apague este trecho:
url(ENDEREÇO-DA-IMAGEM)
Tabela de cores HTML

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Criar caixa para exibir códigos no post ini dipublish oleh Unknown pada hari sábado, 30 de outubro de 2010. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Criar caixa para exibir códigos no post