Hoje vou ensinar a vocês como criar uma caixa com código HTML no próprio post do blog.
1 – O primeiro passo é acessar o código-fonte do seu blog no painel de controles (Modelo -> HTML).
Busque (control+F) pela linha:
]]></b:skin>
2 – Cole na linha acima o código:
code{
background: #eee;
border:1px solid #eee;
color:#000;
font-size:100%;
font-face: verdana;
font-height: 130%;
height: auto;
display:block;
white-space:pre;
word-wrap:break-word;
padding:0 10px 5px 20px;
}
3 – Salve o modelo.
O código ficará dessa maneira
4 – Você pode fazer algumas alterações, como:
Background – Alterar a cor do fundo. Para utilizar uma imagem de fundo, como eu, usar: background: url(endereço da imagem)
Border – Alterar largura da borda, tipo (solid, dashed. dotted) e a cor.
Color – Alterar a cor da fonte
Font-Face – Fonte utilizada
5 – Ao escrever um post, deve-se colocar o código desejado entre as tags <code> e </code> no modo de publicação HTML. Assim, todo conteúdo que estiver entre essas tags ficarão na configuração criada.
6 – Visualize o post antes de publicar, para certificar-se de que ficou da forma como você deseja.
Atenção: Você só precisará fazer o passo 5 toda vez que for publicar algum código no post, não necessitando mais alterar o HTML do seu blog.
Qualquer dúvida basta colocar nos comentários que eu tentarei explicar.
Tá mas, qual o propósito?
Hoje o blogger dá tudo tão mastigadinho… antigamente é q eu me fodia tentando ler demonês pra ter um layout decente, já hj em dia…
Quando vamos dar dicas de layout, precisamos colocar os códigos nos posts pros leitores copiarem. Se não fizer isso que expliquei, não irão aparecer no post e ferra toda a postagem. Isso é mais pra quem quer escrever sobre códigos e dicas, como eu vou passar a escrever. 🙂