Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Postagens Vanessa S.

Criar caixa para exibir códigos no post do blog

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 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;
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: <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>

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

17 Comentários

  1. Carlos Gomes disse:

    Como eu faço para alinhar a caixa no centro? há como fazer isso?

    Abraços.

  2. Franciele disse:

    Aqui não deu certo :/

  3. Fábio disse:

    Esse Site e Muito Boom Obg Por Essa Caixa De HTML Tava Louco PoR Ela 😀 ”

  4. Aline disse:

    O meu não funcionou, enche de barras em tudo q é canto do blog 🙁

  5. pepi disse:

    no meu blog quando adiciono as tag e em vez de aparecer o código completo dentro da caixa aparece varias cauxas com pedaços do código gostaria de saber o que é isso

  6. Isabela disse:

    Não funcionou, que pena… Se tiver solução, por favor me avisem… Isa

  7. Lopes disse:

    Existe alguma maneira de identar o código??

  8. Robson disse:

    acho que copiaram seu post, olha este link:

    http://pro–design.blogspot.com/2010/11/criar-caixa-para-exibir-codigos-no-post.html

    a menos que este blog tambem seja seu é claro…

  9. ::Ana Vitòria Borges :: disse:

    Muito obrigada pelo seu retorno,Clau.

  10. .:: Clau ::. disse:

    Ana Vitoria
    Lamento, mas não há como eu saber especificamente o que acontece no seu template, sendo assim, não tenho como te ajudar.

  11. ::Ana Vitòria Borges :: disse:

    Oi .::Clau::.

    Eu fiz tudo certinho comoo seu tutorial,so que quando eu coloco os codigos e volto para o modo escrever o blog iterpreta o codigo.

    por exemplo,eu coloquei o codigo de um menu dentro da caixinha,e quando eu publico a postagem,aparece o menu e os links,e eu queria que aparecesse somente o còdigo.

    Espero que me ajude,obrigada,ha e o mundo blog,è muito bom,gostei mesmo dos efeitos e scripts,grata!

  12. .:: Clau ::. disse:

    blogaoseraobenedito
    Procure pelo tutorial q eu já publiquei: " Efeito tooltip nos links do blog".

  13. blogaoseraobenedito disse:

    olá clau,
    aqui no Mundo blogger, quando vamos em cima de um link, aparece uma caixa personalizada, em vez da comun, então gostaria de saber como fazer isto…

  14. Pedro Stéfano disse:

    Nao funfou
    o codigo ta sendo executado da mesma forma…

  15. alezandri disse:

    Olá Clau 🙂
    Hoje ensinaste-me uma coisa nova,desconhecia essa função code.
    Beijo.

  16. Lukas disse:

    Valeu mesmo Clau!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.