.gif)
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:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><
