Como fazer uma caixa de texto com borda no blogger

Neste post vou mostrar como adicionar uma "caixa de texto" com borda no Blogger, onde você pode colocar código fonte por exemplo.
Acesse o seu blogger, e na aba Design clique em Editar HTML.
Este é o template do seu blog. Recomendo que você faça um backup do template antes de editar, para que você possa restaurar em caso de algum problema. Para isso clique em Baixar modelo completo.

Agora vamos adicionar uma classe usando a linguagem CSS.
Todos os elementos HTML que usarem esta classe vão "herdar" as suas propriedades.

Procure pela linha que tem o seguinte código:

]]></b:skin>

Acima desta linha insira o seguinte código:

.codebox{
background-color:#CCCCFF;
border-width: .2em;
border-style: dotted;
border-color: #900;
}

Com isso criamos uma classe chamada codebox, que tem como fundo a cor #CCCCFF, tem a largura de borda de .2em, tem o estilo de borda dotted, e cor de borda #900.

Vamos agora adicionar um "elemento" div que usa a classe recém criada. Para isso, editamos/criamos um post no blogger.

No modo Editar HTML, no local onde desejamos inserir a caixa de texto inserimos o seguinte código:

<div class="codebox">Este é o texto da minha caixa de texto.</div>

O resultado fica assim:

Este é o texto da minha caixa de texto.

Note que se você voltar para o modo escrever, o texto vai estar lá, e você poderá configurar cor/estilo de fonte, entre outro.

Espero que este recurso tenha sido útil para você, e até a próxima.