 |
| Uma forma simples de mostrar códigos. |
Uma caixa de códigos é um espaço onde é exibido trechos de HTML para ser copiado como aqui no Notícia e blog, isto é importante pois ajuda o leitor a diferenciar o que é texto do que é código, além de deixar a postagem mais limpa e mais formatada. Para fazer está caixa nós usaremos CSS, então veja abaixo:
Aplicando CSS para definir o modelo da caixa
A primeira coisa a se fazer é inserir o CSS para definir a aparência da caixa e deixa-la bem legal:1)Acesse o painel do Blogger(blogger.com)
2)Vá em Layout->Editar HTML, procure pelo seguinte trecho no seu blog, lembre de usar Ctrl e F(para procura rápida):
]]>Agora adicione antes, do trecho anterior o seguinte:
code{
-webkit-background-clip:initial;
-webkit-background-origin:initial;
background-attachment:initial;
background-color:#FFF;
background-image:url(http://arquivos.noticiaeblog.com/code.jpg);
background-position:0 0;
background-repeat:no-repeat;
color:#666;
display:block;
font-size:13px;
font:normal normal normal 1em/normal 'Courier New', Fixed, monospace;
line-height:17px;
overflow-x:auto;
overflow-y:auto;
text-align:left;
border-color:#9c6;
border-style:solid;
border-width:1px;
margin:1em 0;
padding:0 20px 0 30px;
}3)Salve as alterações
Inserindo um código em uma postagem
Veja nas imagens como fazer: |
| Clique para ampliar |
 |
| Clique para ampliar |
para iniciar e para fechar.
Categories : 