Onde colocar os códigos no blog

Vamos mostrar como achar o lugar certo de colocar os códigos no Blogger. Muitos sites com dicas e tutorias para blogs mandam colocar códigos na pagina editar html, mas precisamos ter cuidado ao copiar e colar senão os códigos não funcionam corretamente, outra duvida comum é saber o local exato onde inserir o código.

editar html do blogspot
Primeiro vamos separar as coisas geralmente na pagina editar html, antes de fazer qualquer alteração nesta pagina faça um backup do seu modelo clicando no link baixar modelo completo depois disso podemos alterar a pagina editar html para colocar os códigos CSS, o nome pode parecer estranho, mas é a formatação do blog, por exemplo, #main-wrapper {padding-left:5px;width: 625px....}, este tipo de código faz a formatação do template, ou seja cor de fundo, bordas, margens, cores, tipo e tamanho das letras e outras coisas, eles devem ficar juntos. Então quando tiver um código assim entre na pagina editar html e procure por body{...} e coloque logo após fechar estas chaves do estilo body.

Você poderia colocar desde a parte
/* Primary layout */
body {background.....}

Até neste trecho antes das duas linhas finais

body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
}
]]></b:skin>
</head>

Mas sugerimos colocar no inicio assim fica mais fácil localizar para editar ou retirar o código caso seja necessário. Muito cuidado com as {chaves} note que todos os códigos têm esse formato: nome{.......}, portanto se colocar outro trecho de código dentro das chaves vai misturar os códigos e fazer que não funcionem corretamente.

banner{color:#6131BD;text-decoration:none; coluna {color:#FF0000;text-decoration:underline;}
}


Esse código acima está errado veja as chaves como estão uma dentro da outra, isso não funcionará o correto é:

banner{color:#6131BD;text-decoration:none;}
coluna {color:#FF0000;text-decoration:underline;}

colocar javascript no blogEssa foi uma parte dos códigos, outro tipo muito comum de código usado é o javascript, mas este na maioria das vezes é muito mais simples de colocar no blog você só precisa entrar na pagina layout, clicar para adicionar um gadget, escolher a opção html/javascript e colar o código.

Quando o site mandar usar os dois códigos (CSS e Javascript) achamos melhor inserir o CSS, ou seja, a formatação (aparência) que vai na pagina editar html primeiro, assim quando colocar o código javascript na pagina layout você já visualizará tudo pronto com a aparência correta.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

73 comentários:

  1. é verdade, a gente sofre muito para achar os lugares certos para tantos códigos
    (tenho blog faz só 2 meses)

    ResponderExcluir
  2. Fabiano, tem como colocar emoticons nos comentarios no blogger?

    ResponderExcluir
  3. Oi...
    Obrigada..as dicas para colocar imagem no fundo foi de grande ajuda para mim.Mas tem muita coisa que eu ainda não sei..por exemplo: Não tem a opção layout no meu blog..tentei mudar os modelos e mesmo assim não deu..por favor me ajude.Também gostaria de saber como colocar imagem onde tem o nome do blog..consegui colocar mas não ocupou o espaço inteiro.

    ResponderExcluir
  4. Johnny Bravo
    já vi uma postagem sobre isso aqui
    http://www.icebreaker.com.br/2009/05/habilitando-o-uso-de-emoticons-nos.html

    (não testei)


    ~* Daiane ♥
    na pagina editar html tem a opção de mudar para o modelo layout.

    para colocar imagem no lugar do titulo diretamente pelo html, procure por

    #blog-header h1 {
    font-size: 24px;
    text-align: left;
    padding: 15px 20px 0 20px;
    margin: 0;
    background-image: url(http://www.blogblog.com/moto_ms/topper.gif);
    background-repeat: repeat-x;
    background-position: top left;
    }


    depois e mude para ficar assim:

    #blog-header h1 {
    font-size: 24px;
    text-align: left;
    padding: 15px 20px 0 20px;
    margin: 0;
    height: 200px;
    background-image: url(endereço da imagem);
    background-repeat: no-repeat;
    background-position: top left;
    }


    onde está endereço da imagem precisa hospedar e colocar aqui o endereço certo da imagem.
    a linha height: 200px; é a altura da imagem então ajuste conforme a imagem que publicar

    veja mais aqui sobre posicionar a imagem de fundo Posicionar imagem de fundo

    ResponderExcluir
  5. Fabiano gostaria de saber como colocar o nome do blog (titulo) com letras diferentes personalizadas você tem alguma dica desde já agradeço e me despeço

    ResponderExcluir
  6. Anônimo
    entre no html do seu blog e procure por h1{..} aqui você pode formatar o texto Como Formatar o Texto do Blog

    mas não use fontes que você baixou de alguma site, pois o blog usa as fontes disponíveis no computador de quem está acessando a pagina, ou seja se você colocar uma fonte(letra) que o meu computador não tem ele substituirá por outra

    ResponderExcluir
  7. Olá. primeiro queria dizer que adoro seu blog. Ele me ajuda muito... sou péssima com essas coisas, mas me divirto muito com meu blog.
    Segundo: existe uma maneira de manter o "posts recentes" somente na primeira pagina? Tipo, quando alguém clica para ler uma outra postagem, esse gadget de postagens recentes some.
    Terceiro: por acaso se interessaria em fazer parceria com meu blog? Se quiser meu blog é www.winxclubstudios.blogspot.com
    Fico aguardando sua resposta.

    ResponderExcluir
  8. Eu não consigo mudar nada do meu blog!! Sou lerda =/ Queria mudar o fundo, mas nunca consigo.. Help!!!

    ResponderExcluir
  9. Flora Sellene

    veja aqui como mostrar conteúdo diferente nas paginas do blog

    sobre parcerias veja como funciona nosso sistema de top parceiros

    ResponderExcluir
  10. Poxa, eu gostaria de uma ajuda, eu queria saber como eu coloco... tipo, countdown, ou aqela para de musica, ou essas paradinhas que tem no blo, ta dizendo que tem q editar no HTML mas eu num consigo. Será que tem como me ajudar ?

    ResponderExcluir
  11. veja aqui sobre colocar musica no blog

    http://www.dicasparablogs.com.br/search/label/M%C3%BAsica

    ResponderExcluir
  12. Excelentes dicas, sou péssima em html e css, já tentei colocar o código do diHITT no layout e não consegui pois só dá erro de formatação, então coloquei como gadget.

    Abração.

    ResponderExcluir
  13. Ta mt dificil em achar os lugares corretos para colar o codigo !

    ResponderExcluir
  14. Fabiano, bom dia

    Queria mudar a posição da palavra comentarios, por exemplo no meu blog ela esta do lado esquerda eu queria colocar a palavra no lado direito, tem como?

    www.blogdagsn.com

    ResponderExcluir
  15. Tiago Borges
    entre na pagina editar html e procure por

    .post-comment-link a{text-align:right}


    se já tiver apenas adicione o trecho text-align:right

    ResponderExcluir
  16. Por favor gostaria muito de saber como faço pra colocar o código (e qual é o código) para Orkut no blog.
    Pois o que achei na internet não apareceno meu blog.

    Por favor me ajudem!!!

    ResponderExcluir
  17. LP Decor
    o código para o orkut é como qualquer outro link, você pode fazer pela pagina layout, adicionar gadget lista de links ou imagem, dependendo se irá usar texto ou imagem e na hora de colocar o link use do seu perfil ou comunidade no orkut

    ResponderExcluir
  18. tem um código HTML padrão? tipo assim, pq quando a gente adiciona uma HTML ela vem em Branco, e ai vc fala que tem que achar isso, achar aquilo... aonde eu acho se ta em branco?

    ResponderExcluir
  19. nayara, o que está branco? a cor de fundo? se for procure por background

    ResponderExcluir
  20. Antes de fazer qualquer alteração nesta pagina faça um backup do seu modelo clicando no link baixar modelo completo.Faço todas as etapas para ter um backup, realizo e salvo em uma pagina nos meus documentos.O icone esta lá. Acontece que o backup não abre aparece a tela do Windows Media Player. Com a seguinte mensagem "Não é possivel executar o arquivo. O arquivo esta corrompido ou o Player não dá suporte ao formato que voê esta tentando executar. "Classe não registrada" O que devo fazer para ter um Backup COPIAR COLAR NÃO ADINTA? SÓ CONSIGO ASSIM MAS ME PARECE QUE NÃO É O CORRETO.

    ResponderExcluir
  21. o arquivo do backup não é para você abrir, é só pra colocar no blog caso alguma das alterações que faça dê errado

    ResponderExcluir
  22. Poxa sera que tem como vc me explicar como faço para colocar no formato CSS...nao to conseguindo...eu ja tentei mil vezes..mais nao to conseguindo...poderia me explicar???

    ResponderExcluir
  23. os CSS podem ser colocados logo depois que fecha a tag body{..}

    ResponderExcluir
  24. Muito bom essa postagem !!! :D
    mais eu queria saber como que poe efeitos no mouse e algum site de onde achar códigos desses efeitos ... alguém sabe aí ?

    ResponderExcluir
  25. Olá amigo. Comecei a fazer um blog agora e tenho uma dificuldade em adicionar um gadget. O problema é que eu não tenho a opção html/javascrip em Layout/Adicionar gadget. Só tenho a opção URL. E aí como eu faço? obrigado

    ResponderExcluir
  26. Alexandre Magno
    é bem estranho dizer isso. quando clica para adicionar um gadget deveria aparecer um lista de opções.

    nunca apareceu isso no seu blog?

    ResponderExcluir
  27. Achei legal essa dica, vou colocar no meu blog daqui alguns dias.

    ResponderExcluir
  28. Seguindo a tag "Códigos"vim parar aqui, para importunar o Fabiano outra vez! A questão é a seguinte Fabiano, estou quase terminando a edição total do meu template, mas como eu não sossego, peço que me ajude! Andando pela blogosfera , achei um banner e dentro dele um vídeo do youtube, queria saber como faço para conseguir o mesmo em meu blog, ou seja colocar o vídeo dentro ou encaixado nessa imagem. Aqui http://5minutooos.blogspot.com/ está explicado melhor... Me ajuda? Desde já agradeço, espero contato!

    ResponderExcluir
  29. você poderia usar um código assim:
    <div style=" background-image:url(endereço da imagem); width:300px; height:300px; text-align:center">video</div>

    claro que terá que hospedar uma imagem já no tamanho certo e ajustar a largura e altura da div, são os valores 300px

    ResponderExcluir
  30. Cara você é o cara! HAHAHA' Estou quase lá, só não consigo mexe na altura do vídeo, a parte de cima sempre fica em cima da imagem!

    ResponderExcluir
  31. Fabiano está quese pronto , o único problema é que quando mexo na altura, o vídeo sempre sobe, ou seja eu só consigo ajustar na imagem abaixo , mas a parte cima não! http://5minutooos.blogspot.com/

    ResponderExcluir
  32. desculpe rsrs, esqueci deste detalhe rsrs.

    para dar o espaço que precisa coloque no código, dentro das aspas style padding-top:20px;

    claro ajuste o numero 20 pra o que ficar melhor no seu blog

    ResponderExcluir
  33. HAHAHA' Fabiano está ficando assim


    <div style =padding-top:20px"; background-image:


    Mas não está dando certo, a imagem está sumindo!

    ResponderExcluir
  34. Fabianooooooooooooooooo! Uhuul Eu consegui!!!! Cara muito obrigado, deu tudo certinho, está perfeito! Muitíssimo obrigado!

    ResponderExcluir
  35. o trecho é dentro das aspas style="padding-top:20px; background-image:u........

    ResponderExcluir
  36. Olá!!
    Espero q possa me ajudar a achar o código para retirar a borda branca que apareceu ao redor da minha imagem do header... http://oniiblog.blogspot.com/
    Quero fazer algo semlhante ao site da Marimoon... entende?? Aguardo e agradeço

    ResponderExcluir
  37. aquela borda faz parte da borda do template, procure .content-inner {
    padding: 10px 10px;
    }
    e tente mudar esses valores para 0

    ResponderExcluir
  38. Opa Fabiano!!
    Graças a sua resposta entendi por quais ccódigos deveria procurar para meu blog!! Pois semlhante a sua resposta encontrei o "content" e seu valor d "padding" ... Carinha, obrigado mesmo... agora vou desenvolver o background unido a imagem do cabeçalho comol imagina...

    OBRIGADO

    ResponderExcluir
  39. Fabiano, como faz tipo pra personaliza a aparencia dos gadgets tipo imagem de fundo formato da borda, aparencia do gadget, tipo esse site http://www.gamesmax.net.br/ so que dai vc so coloca o conteudo e toda vez a parencia ja ta pronta, isso proavelmente e no css do editar html?
    envie pro meu email felipe_93_@hotmail.com

    ResponderExcluir
  40. para alterar a aparencia é com estilos CSS que também são colocados no blog pela pagina editar html

    ResponderExcluir
  41. Oi Fabiano to com um probleminha e preciso de um help, acho que apaguei o codigo do post do blogger ao inserir o meu template pois os posts não aparecem. queria saber qual é o codigo para colocar de volta no lugar. Desde já te agradeço.

    ResponderExcluir
  42. o que mostra o post do blogger é post.body no meio do sinal de menor e maior, veja em outro blog se tiver

    ResponderExcluir
  43. Oi,obrigada pela dica! Vou verificar e retorno pra contar se consegui ou não. Abraços!!!

    ResponderExcluir
  44. como que faço pra colocar esse letreiro no meu blog
    http://www.nackvision.com/ticker/

    ResponderExcluir
  45. é só clicar em gerar código e depois colocar no seu blog pela pagina designer, adicionar gadget, html/javascript e colar o código

    ResponderExcluir
  46. olá Fabiano,primeira mente quero dar meus parabéns pelo blog,e quria pedir pra você se vc pode fazer um tutorial com video desse assunto se der manda aew blz!!! abraços

    ResponderExcluir
  47. Por favor me ajudem! Eu naum tô conseguindo achar onde devo colocar os códigos, tô muito aflita:(! Preciso de ajuda, e espero receber!
    um abraço ! ;*

    ResponderExcluir
  48. isso depende muito de qual código está querendo colocar no seu blog... tente explicar melhor o que deseja fazer

    ResponderExcluir
  49. ola amigo, talvez vc seja a pessoa q vai finalmente solucionar meu problema. Ha alguns meses peguei um blog para administrar porem não sei se é porque ele não esta atualizado e~le não tem a opção layout em meu painel.só nova postagem, editar postagem e configuracões. Por favor me ajuda. o endereco é nacaosantambc.blogspot.com.
    desde ja agradeço!

    ResponderExcluir
  50. marcio se o painel aparece deste jeito é porque você não tem direitos de administrador no blog... tem que pedir para o outro dono do blog dar esses direitos para você, isso é feito em configurações >> permissões

    mas o outro dono do blog tem que fazer

    ResponderExcluir
  51. Obrigado, muito obrigado! ainda não sei se é isso mas enquanto aguardava resposta desconfiei que poderia ser quando vi que a outro pessoa que administra o blog está como dono do blog e eu como membro da equipe. agora com sua explicação vou tirAR A LIMPO E SANAR O PROBLema para aí sim aprender com vcs a deixar nosso blog BEM BACANA! mais uma vez OBRIGADO!

    ResponderExcluir
  52. É Fabi queria muito mudar apenas um detalhe no meu blog uma img de fundo (background) já tenho a img hospedada mais quando tento colocar o url lá no html ñ vai nem troca o fundo do blog.
    Queria saber qual seria exatamente o codigo pra colocar a img!
    E também c vc tiver algum site q ofereça um template free eu

    Agradeceria muitooooooo

    ResponderExcluir
  53. Samy-san
    qual o endereço da imagem que está usando?

    na maior parte das vezes o problema é endereço errado, tem que usar o direct link

    ResponderExcluir
  54. Vou tentar colocar as barras espero conseguir.
    Obrigada.
    Lindo fim de semana para você

    ResponderExcluir
  55. Eu tenho a seguinte dúvida:Aonde eu acho o body?é um tipo de código?aonde coloco o body?e que parte do código?

    ResponderExcluir
  56. Letícia
    está na pagina editar html, use o ctrl F para achar

    ResponderExcluir
  57. Oi...
    Não entendo muito desses códigos. Tenho meu blog há 1 mês e estou cadastrando no diHITT, só que eles pedem para colocar um link de lá na minha página. Aonde e como eu faço isso? Será que podem me ajudar?
    Obrigada

    ResponderExcluir
  58. BOA TARDE,

    FABIANO, NAO CONSIGO CONFIGURAR MEU
    BLOG PORQUE NÃO SEI COMO ACHAR O CODIGO CSS PARA COLAR NA CAIXA PERSONALIZAR AVANÇADO
    AGORA MEU BLOG FICOU SÓ COM UMA COLUNA HORRIVEL
    ME AJUDE

    ResponderExcluir
  59. Sonia Aparecida está na pagina modelo > editar html

    ResponderExcluir
  60. Brigadão cara textei de consigui na boa, so me tira uma duvida como posso aumentar um pouco a imagem e consequentemente obter um pouco mais de texte?

    ResponderExcluir
  61. Eu não consigo achar .. vc poderia min dar uma dica mais facil ??

    ResponderExcluir
  62. o jeito mais facil de achar códigos é usando o Ctrl + F na pagina editar HTML

    ResponderExcluir
  63. Fabiano,
    parabéns pelo seu blog e pela sua generosidade em compartilhar seu conhecimento. Eu acho que, de todos os blogueiros que eu pesquisei na internet, em busca de informações sobre como fazer meu blog, você é o mais didático.
    Eu estou com dificuldades em fazer as seguintes ações no blog que estou construindo:
    - Construir e colocar um menu horizontal debaixo do header
    - Afastar o header do texto
    - Colocar linhas verticais e horizontais, separando alguns gadgets
    Você poderia me dar alguma dica? Também acho bem difícil encontar os lugares onde inserir os códigos.
    Mais uma vez, obrigada.
    Ilana.

    ResponderExcluir
  64. Ilana Polakiewicz

    sobre o menu aqui tem o código:
    Menu Horizontal com Efeitos no Blogger usando CSS

    quando colocar esse menu poderá ajustar o espaço acima e abaixo dele dando o espaço que deseja na header.


    sobre as linhas para separar gadgets você poderia criar um estilo CSS colocando uma borda, desta forma:

    #Label1 {border-bottom: 2px solid #000}

    esse é um exemplo para o gadget dos marcadores, veja aqui como fazer para qualquer gadget:
    Personalizar gadgets do Blog


    ResponderExcluir
  65. Ola bom dia estou com dificuldade para trocar a fonte das barras laterais gostaria de mudar o estilo e tbm passar tudo para escrita normal pois algumas partes estão todas em maiuscula aqui vai meu link pra vc visualizar o que quero mudar :http://giangelolembrancinhas.blogspot.com.br/

    obrigada desde já

    ResponderExcluir
  66. o que faz as letras todas maiúsculas é o código:

    text-transform: uppercase;


    então procure no seu html e apague

    ResponderExcluir
  67. Eu queria saber como colocar um link contido em uma palavra tipo quando tem ''Veja Aqui'' ai quando vc clica já é direcionado para outra página. Como se faz isso????

    ResponderExcluir
  68. o código para fazer links é assim:

    <a href='http://www.dicasparablogs.com.br/2010/03/onde-colocar-os-codigos-no-blog.html'target='_blank'>Onde colocar os códigos no blog</a>

    ResponderExcluir
  69. Oi Fabiano,

    Agora que mudei o modelo do meu blog não consigo encontrar a sentença onde posteriormente devo colar o código do Tag Cloud. Você pode me ajudar?
    eu agradeceria muito.
    Abraço,

    Gustavo
    www.papagaiomudo.blogspot.com.br

    ResponderExcluir
  70. Gustavo Alvarez
    não sei exatamente qual é o código que está falando.... mas use o ctrl F para achar trechos do html do blogger

    ResponderExcluir
  71. OLÁ, GOSTARIA DA AJUDA PARA INSERIR UM BANNER CABEÇALHO DO ADSENSE NO MEU BLOG

    ResponderExcluir
  72. Maria Cristina para colocar anúncios do adsense tem um gadget no blogger

    entre na pagina layout > adicionar gadget > Adsense

    ResponderExcluir