Cursos 24 Horas - Cursos 100% Online com Certificado

Criando Uma Caixa Para Exibir Códigos HTML - Blogger

28 Comentários Autor : Notícia e blog 13 março 2010
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
Só pra lembrar as tags que aparecem nas imagens são <code> para iniciar e </code> para fechar.
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.

    28 Comentários

    Jc Denton disse...
    17 de março de 2010 18:37 #

    Belo template, foi você quem fez?

    Notícia e blog disse...
    17 de março de 2010 18:59 #

    @Jc Denton, não adptei de outro.

    Jano scrollux.com disse...
    4 de abril de 2010 18:29 #

    Ó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

    Notícia e blog disse...
    4 de abril de 2010 19:15 #

    @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.

    Jano scrollux.com disse...
    10 de abril de 2010 13:58 #

    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;
    }

    Admin disse...
    24 de junho de 2010 13:26 #

    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

    gadarf disse...
    27 de junho de 2010 13:26 #

    Não deu muito certo no meu template, que pena.

    Gizaa Veiga disse...
    28 de junho de 2010 17:13 #

    Valeuu!!

    Tentei vários tutos e não tinha conseguido, com o seu deu certinho :)

    []s

    Jaque Polaka disse...
    28 de setembro de 2010 18:47 #

    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

    muryllo dantas disse...
    30 de setembro de 2010 18:18 #

    gostei e funcionou
    vlw

    MDB - Como Ganhar Dinheiro com Blogs disse...
    7 de março de 2011 14:32 #

    Belo artigo, fiz em meu blog e deu tudo certo. Obrigado pela dica.

    Abraço.

    Notícia e blog disse...
    8 de março de 2011 16:08 #

    @MDB - Como Ganhar Dinheiro com Blogs
    Obrigado a você se precisar de ajuda é perguntar!

    seu portal disse...
    15 de maio de 2011 17:27 #

    pulou da etapa 3 para a etapa 7
    isso ta ceto mesmo?
    tentei aqui e não consegui ;/
    visitem: www.seuportalblog.blogspot.com

    Marizah disse...
    23 de junho de 2011 15:33 #

    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

    Teka disse...
    27 de julho de 2011 11:51 #

    Fiz tudo certinho, mas não aparece a borda quando publico a postagem.

    DJ TALLYSSON disse...
    5 de novembro de 2011 21:17 #

    Oução aew galera a radio vanguarda On-Line e baixem muita musica eletronica www.tallyssonferraz.tk

    Bel disse...
    5 de março de 2012 17:04 #
    Este comentário foi removido pelo autor.
    Haylson disse...
    10 de março de 2012 14:58 #

    Como fica?pode mostrar uma foto de como ficou?

    Wemerson santos silva disse...
    18 de abril de 2012 20:25 #

    os codigo do meu banner estao aparecendo so que nao na caixa voce poderia min ajuda meu skype download-filmes ou meu blog http://downlaod-filmes.blogspot.com/

    Marcos disse...
    27 de abril de 2012 14:23 #

    Cara seu email tá aparecendo nas imagens tira antes que um hacker veja.

    silvia roberta disse...
    7 de junho de 2012 11:35 #

    gostaria muuito de fazer um blog de scraps mas estou apanhando feio. nao consigo fazer com que os codigos html apareçam embaixo dos scraps para as pessoas copiarem. o que consegui fazer aparecer uma caixinha que aparece somente um link p o meu blog por favor me ajudem fazer um codigo para os meus scraps passo a passo se posssivel. obrigada

    Daylor Dutra disse...
    20 de junho de 2012 15:09 #
    Aline Stechitti disse...
    30 de julho de 2012 15:25 #

    Porque que quando eu faço isso o blog inteiro enche de código???? vira uma bagunça! ¬¬

    Tatiane Campos disse...
    15 de agosto de 2012 13:52 #

    Entendi nada...

    Gabriela Rocha disse...
    4 de outubro de 2012 20:21 #

    como eu consigo criar uma caixa grande com outras duas pequenas dentra dela??

    Gabriela Rocha disse...
    4 de outubro de 2012 20:22 #
    Pedro Nogueira Lima disse...
    7 de novembro de 2012 21:31 #

    Amigo estou com um problema, postei uma planilha da web app da microsoft no blogger e estou precisando apagar ou ocultar uma parte desta. Ela é inserida a partir de um código html. Vou postar um link com um arquivo descrevendo o problema. Se puder me ajudar fico muito agradecido.

    https://dl.dropbox.com/u/28991253/Problema%20blog.docx

    Anna Vlis disse...
    13 de junho de 2013 17:08 #

    Amei sua postagem,mas gostaria de saber como faço para acrescenter neste código,barra de rolagem e botão copiar? Bjinhoss e bgd

    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.