Pesquisar este blog

03/11/2010

Criar caixa para exibir no Post

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)
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 criar Bordas 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: para iniciar e 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:


Desta forma:


insira seus códigos aqui

0 comentários:

Postar um comentário

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Regras:
1º - Proibido Xingar
2º - Proibido ofender os usuários
3º - Deixe sua opinião sobre o post
4º - Não Faça pedidos fora da área especifica

você é o visitante número:

Blog do Gustavo