Categorias: Blog, Web

Como colocar código HTML no post do blogger

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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

0 comentários

  1. 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. 🙂