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
Onde colocar os códigos no blog
4/ 5
Oleh

73 Comentários

Anônimo
4 de março de 2010 16:57 delete

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

Reply
4 de março de 2010 20:33 delete

Fabiano, tem como colocar emoticons nos comentarios no blogger?

Reply
5 de março de 2010 00:11 delete

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.

Reply
5 de março de 2010 15:16 delete

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

Reply
Anônimo
5 de março de 2010 20:28 delete

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

Reply
5 de março de 2010 20:32 delete

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

Reply
5 de março de 2010 21:45 delete

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.

Reply
Anônimo
6 de março de 2010 00:02 delete

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

Reply
6 de março de 2010 00:42 delete

Flora Sellene

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

sobre parcerias veja como funciona nosso sistema de top parceiros

Reply
Anônimo
6 de março de 2010 21:55 delete

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 ?

Reply
6 de março de 2010 23:29 delete

veja aqui sobre colocar musica no blog

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

Reply
7 de março de 2010 13:22 delete

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.

Reply
10 de março de 2010 20:28 delete

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

Reply
11 de março de 2010 10:09 delete

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

Reply
11 de março de 2010 15:50 delete

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

Reply
14 de março de 2010 21:38 delete

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!!!

Reply
14 de março de 2010 21:54 delete

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

Reply
nayara
17 de março de 2010 17:14 delete

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?

Reply
17 de março de 2010 17:20 delete

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

Reply
23 de março de 2010 12:59 delete

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.

Reply
23 de março de 2010 14:22 delete

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

Reply
5 de abril de 2010 02:50 delete

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???

Reply
5 de abril de 2010 12:55 delete

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

Reply
10 de abril de 2010 16:52 delete

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í ?

Reply
21 de abril de 2010 13:04 delete

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

Reply
21 de abril de 2010 14:52 delete

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?

Reply
3 de junho de 2010 22:58 delete

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

Reply
FJP
25 de setembro de 2010 16:57 delete

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!

Reply
25 de setembro de 2010 18:01 delete

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

Reply
FJP
25 de setembro de 2010 19:06 delete

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!

Reply
FJP
25 de setembro de 2010 19:19 delete

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/

Reply
25 de setembro de 2010 19:22 delete

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

Reply
FJP
25 de setembro de 2010 19:36 delete

HAHAHA' Fabiano está ficando assim


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


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

Reply
FJP
25 de setembro de 2010 20:11 delete

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

Reply
25 de setembro de 2010 20:51 delete

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

Reply


???
27 de outubro de 2010 20:52 delete

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

Reply
28 de outubro de 2010 14:55 delete

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

Reply


???
28 de outubro de 2010 20:03 delete

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

Reply
14 de janeiro de 2011 02:58 delete

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

Reply
14 de janeiro de 2011 12:49 delete

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

Reply
30 de janeiro de 2011 23:49 delete

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.

Reply
31 de janeiro de 2011 00:58 delete

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

Reply
1 de fevereiro de 2011 00:31 delete

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

Reply
13 de março de 2011 14:35 delete

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

Reply
13 de março de 2011 20:48 delete

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

Reply
30 de março de 2011 12:05 delete

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

Reply
15 de abril de 2011 12:42 delete

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 ! ;*

Reply
15 de abril de 2011 14:58 delete

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

Reply
16 de abril de 2011 09:16 delete

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!

Reply
16 de abril de 2011 13:51 delete

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

Reply
marciocens
19 de abril de 2011 11:01 delete

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!

Reply
13 de setembro de 2011 18:27 delete

É 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

Reply
14 de setembro de 2011 14:55 delete

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

Reply
1 de outubro de 2011 13:57 delete

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

Reply
23 de outubro de 2011 01:00 delete

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?

Reply
23 de outubro de 2011 14:24 delete

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

Reply
14 de maio de 2012 02:08 delete

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

Reply
4 de julho de 2012 17:13 delete

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

Reply
4 de julho de 2012 22:06 delete

Sonia Aparecida está na pagina modelo > editar html

Reply
24 de julho de 2012 14:13 delete

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?

Reply
24 de dezembro de 2012 16:27 delete

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

Reply
24 de dezembro de 2012 19:39 delete

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

Reply
8 de março de 2013 11:05 delete

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.

Reply
8 de março de 2013 12:57 delete

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


Reply
9 de março de 2013 10:03 delete

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á

Reply
9 de março de 2013 11:41 delete

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

text-transform: uppercase;


então procure no seu html e apague

Reply
Anônimo
18 de março de 2013 14:29 delete

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????

Reply
18 de março de 2013 16:00 delete

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>

Reply
25 de junho de 2013 22:30 delete

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

Reply
25 de junho de 2013 23:50 delete

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

Reply
11 de novembro de 2013 20:30 delete

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

Reply
11 de novembro de 2013 20:50 delete

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

entre na pagina layout > adicionar gadget > Adsense

Reply