 |
| 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):
]]></b:skin>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 |
Pronto você já pode inserir vários código para o seu leitor, simples assim. Ah e se você tem alguma sugestão de postagem fale conosco.
16 Comentários
Belo template, foi você quem fez?
@Jc Denton, não adptei de outro.
Ótimo artigo.
Podemos adicionar esse css direto no blockquote do Blogger e assim economizamos tempo.
Eu fiz esse processo no meu Blog
http://www.scrollux.com/2010/03/mostrar-adsense-apenas-aos-visitantes.html
@Jano scrollux.com, da sim mas aumenta o uso de css no blog deixando um pouco lento a página.Ma você usou a tag style.
Eu adicionei o CSS acima direto no CSS do Template na parte
.post blockquote {
-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;
}
Olá tudo bom
não consigo fazer com que codigos HTML e JAVA aparecam nos posts do meu blog
poderia me indicar um tutorial ou publicar no seu blog ?
se puder me ajudar eu agradeço
contato: fabiano.cezar@hotmail.com
Blog: www.acessobloggers.blogspot.com
Valew
Não deu muito certo no meu template, que pena.
Valeuu!!
Tentei vários tutos e não tinha conseguido, com o seu deu certinho :)
[]s
Por favor!
Eu não consigo
eu não entendi direito como faz você explicando na imagem...
Ficaria mais fácil d entender se você esplicasse escrevendo
O problema do meu é que a imagem fica dentro da caixa, e não o código... aguma coisa tá errada e eu não estou gostando
Por favor me responde nesse e-mail:::>
youtube.polaka@hotmail.com
gostei e funcionou
vlw
Belo artigo, fiz em meu blog e deu tudo certo. Obrigado pela dica.
Abraço.
@MDB - Como Ganhar Dinheiro com Blogs
Obrigado a você se precisar de ajuda é perguntar!
pulou da etapa 3 para a etapa 7
isso ta ceto mesmo?
tentei aqui e não consegui ;/
visitem: www.seuportalblog.blogspot.com
Como você colocou um primeiro código da procura do código no HTML do Blogger? Eu queria colocar ele também no meu Blog, mas não está dando certo. O código para adicionar antes do texto dentro do HTML deu certo. Queria colocar no meu blog essa forma de mostrar o HTML para as pessoas que acessam meu Blog. Se você não se importasse e pudesse mostrar essa explicação ficaria agradecida.
Já tentei vários tipos de caixas para inserir códigos e ainda não tinha conseguido exibir nenhum correto. Essa foi o único que deu certo.
Meu Blog:
http://cliptomania.blogspot.com/
Abçs
Fiz tudo certinho, mas não aparece a borda quando publico a postagem.
Oução aew galera a radio vanguarda On-Line e baixem muita musica eletronica www.tallyssonferraz.tk
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.