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.

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

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

Postagens mais Comentadas Receba Dicas por E-mail Recomendações dos Leitores

Link desta Pagina

69Comentários:

Anônimo disse...: é verdade, a gente sofre muito para achar os lugares certos para tantos códigos
(tenho blog faz só 2 meses); 4 de março de 2010 16:57
Johnny Bravo disse...: Fabiano, tem como colocar emoticons nos comentarios no blogger?; 4 de março de 2010 20:33
~* Daiane ♥ disse...: 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.; 5 de março de 2010 00:11
Fabiano Roberto disse...: 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; 5 de março de 2010 15:16
Anônimo disse...: 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; 5 de março de 2010 20:28
Fabiano Roberto disse...: 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; 5 de março de 2010 20:32
Flora Sellene disse...: 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.; 5 de março de 2010 21:45
Anônimo disse...: Eu não consigo mudar nada do meu blog!! Sou lerda =/ Queria mudar o fundo, mas nunca consigo.. Help!!!; 6 de março de 2010 00:02
Fabiano Roberto disse...: Flora Sellene

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

sobre parcerias veja como funciona nosso sistema de top parceiros; 6 de março de 2010 00:42
Anônimo disse...: 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 ?; 6 de março de 2010 21:55
fabiano disse...: veja aqui sobre colocar musica no blog

http://www.dicasparablogs.com.br/search/label/M%C3%BAsica; 6 de março de 2010 23:29
Claudine Ribeiro G. Netto disse...: 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.; 7 de março de 2010 13:22
Juliana disse...: Ta mt dificil em achar os lugares corretos para colar o codigo !; 10 de março de 2010 20:28
Tiago Borges disse...: 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; 11 de março de 2010 10:09
Fabiano Roberto disse...: 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; 11 de março de 2010 15:50
LP Decor disse...: 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!!!; 14 de março de 2010 21:38
Fabiano Roberto disse...: 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; 14 de março de 2010 21:54
nayara disse...: 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?; 17 de março de 2010 17:14
Fabiano Roberto disse...: nayara, o que está branco? a cor de fundo? se for procure por background; 17 de março de 2010 17:20
Wilton Pinheiro disse...: 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.; 23 de março de 2010 12:59
Fabiano Roberto disse...: o arquivo do backup não é para você abrir, é só pra colocar no blog caso alguma das alterações que faça dê errado; 23 de março de 2010 14:22
Twilight Fans disse...: 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???; 5 de abril de 2010 02:50
Fabiano Roberto disse...: os CSS podem ser colocados logo depois que fecha a tag body{..}; 5 de abril de 2010 12:55
Sum Cassius disse...: 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í ?; 10 de abril de 2010 16:52
Fabiano Roberto disse...: Sum Cassius

se quiser aqui tem o efeito Imagem seguindo o ponteiro do mouse; 10 de abril de 2010 19:49
Alexandre Magno disse...: 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; 21 de abril de 2010 13:04
Fabiano Roberto disse...: 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?; 21 de abril de 2010 14:52
empregasaojosecampos.com disse...: Achei legal essa dica, vou colocar no meu blog daqui alguns dias.; 3 de junho de 2010 22:58
FJP disse...: 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!; 25 de setembro de 2010 16:57
Fabiano Roberto disse...: 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; 25 de setembro de 2010 18:01
FJP disse...: 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!; 25 de setembro de 2010 19:06
FJP disse...: 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/; 25 de setembro de 2010 19:19
Fabiano Roberto disse...: 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; 25 de setembro de 2010 19:22
FJP disse...: HAHAHA' Fabiano está ficando assim

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

Mas não está dando certo, a imagem está sumindo!; 25 de setembro de 2010 19:36
FJP disse...: Fabianooooooooooooooooo! Uhuul Eu consegui!!!! Cara muito obrigado, deu tudo certinho, está perfeito! Muitíssimo obrigado!; 25 de setembro de 2010 20:11
Fabiano Roberto disse...: o trecho é dentro das aspas style="padding-top:20px; background-image:u........; 25 de setembro de 2010 20:51
<br><br>??? disse...: 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; 27 de outubro de 2010 20:52
Fabiano Roberto disse...: aquela borda faz parte da borda do template, procure .content-inner {
padding: 10px 10px;
}
e tente mudar esses valores para 0; 28 de outubro de 2010 14:55
<br><br>??? disse...: 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; 28 de outubro de 2010 20:03
Felipe disse...: 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; 14 de janeiro de 2011 02:58
Fabiano Roberto disse...: para alterar a aparencia é com estilos CSS que também são colocados no blog pela pagina editar html; 14 de janeiro de 2011 12:49
Kathya Hortega disse...: 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.; 30 de janeiro de 2011 23:49
Fabiano Roberto disse...: o que mostra o post do blogger é post.body no meio do sinal de menor e maior, veja em outro blog se tiver; 31 de janeiro de 2011 00:58
Kathya Hortega disse...: Oi,obrigada pela dica! Vou verificar e retorno pra contar se consegui ou não. Abraços!!!; 1 de fevereiro de 2011 00:31
Galo Tunes disse...: como que faço pra colocar esse letreiro no meu blog
http://www.nackvision.com/ticker/; 13 de março de 2011 14:35
Fabiano Roberto disse...: é só clicar em gerar código e depois colocar no seu blog pela pagina designer, adicionar gadget, html/javascript e colar o código; 13 de março de 2011 20:48
Anderson disse...: 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; 30 de março de 2011 12:05
Índiaa ♥ disse...: 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 ! ;*; 15 de abril de 2011 12:42
Fabiano Roberto disse...: isso depende muito de qual código está querendo colocar no seu blog... tente explicar melhor o que deseja fazer; 15 de abril de 2011 14:58
Marcio CENS disse...: 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!; 16 de abril de 2011 09:16
Fabiano Roberto disse...: 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; 16 de abril de 2011 13:51
marciocens disse...: 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!; 19 de abril de 2011 11:01
Samy-san disse...: É 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; 13 de setembro de 2011 18:27
Fabiano Roberto disse...: 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; 14 de setembro de 2011 14:55
Graça disse...: Vou tentar colocar as barras espero conseguir.
Obrigada.
Lindo fim de semana para você; 1 de outubro de 2011 13:57
Letícia disse...: 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?; 23 de outubro de 2011 01:00
Fabiano Roberto disse...: Letícia
está na pagina editar html, use o ctrl F para achar; 23 de outubro de 2011 14:24
Andrea disse...: 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; 14 de maio de 2012 02:08
Sônia Aparecida disse...: 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; 4 de julho de 2012 17:13
Fabiano Roberto disse...: Sonia Aparecida está na pagina modelo > editar html; 4 de julho de 2012 22:06
AndroidNTA disse...: 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?; 24 de julho de 2012 14:13
Redes Sociais disse...: Eu não consigo achar .. vc poderia min dar uma dica mais facil ??; 24 de dezembro de 2012 16:27
Fabiano Roberto disse...: o jeito mais facil de achar códigos é usando o Ctrl + F na pagina editar HTML; 24 de dezembro de 2012 19:39
Ilana Polakiewicz disse...: 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.; 8 de março de 2013 11:05
Fabiano Roberto disse...: 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; 8 de março de 2013 12:57
Lembrancinhas Gi Angelo disse...: 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á; 9 de março de 2013 10:03
Fabiano Roberto disse...: o que faz as letras todas maiúsculas é o código:

text-transform: uppercase;

então procure no seu html e apague; 9 de março de 2013 11:41
Anônimo disse...: 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????; 18 de março de 2013 14:29
Fabiano Roberto disse...: 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>; 18 de março de 2013 16:00

Onde colocar os códigos no blog

69Comentários:

Postar um comentário