1. criar caixa simples para exibir códigos no Blogger:
Entre menu “modelo” >>”editar html“, não precisa clicar em “expandir modelos de widgets” e procure por: ]]></b:skin>
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;ord; padding:0 10px 5word-wrap:break-wpx 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)
Veja Tabela de cores HTML
Você pode estipular o tipo de borda que quiser, inclusive bordas arredondadas.
Sobre bordas e seus estilos, veja como Personalizar bordas e como criarBordas arredondadas .
Se quiser também pode aplicar Efeito Sombreado na borda.
Como utilizar a caixa para exibir códigos nos posts:
Sempre que você for publicar códigos nos posts, você deverá incluir a tag para que o blogger reconheça a caixinha que você acabou de criar.
Que são: <code> para iniciar e </code> para fechar.
Esta tag você deve incluir no modo “Editar HTML” da postagem.
Você deve inserir os trechos de códigos que irá exibir na sua postagem entre as tags:
<code>
</code>
Desta forma:
<code>insira seus códigos aqui</code>
Nenhum comentário:
Postar um comentário