Onde colocar os códigos no blog - Dicas para Blogs
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 finaisbody#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 ComentadasReceba Dicas por E-mailRecomendações dos LeitoresLink desta PaginaOnde colocar os códigos no blog
é verdade, a gente sofre muito para achar os lugares certos para tantos códigos(tenho blog faz só 2 meses)
Fabiano, tem como colocar emoticons nos comentarios no blogger?
~* Daiane ♥
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
Johnny Bravo já vi uma postagem sobre isso aquihttp://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 publicarveja mais aqui sobre posicionar a imagem de fundo Posicionar imagem de fundo
5 de março de 2010 15:16
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
Anônimo entre no html do seu blog e procure por h1{..} aqui você pode formatar o texto Como Formatar o Texto do Blogmas 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
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.comFico aguardando sua resposta.
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
Flora Sellene veja aqui como mostrar conteúdo diferente nas paginas do blogsobre parcerias veja como funciona nosso sistema de top parceiros
6 de março de 2010 00:42
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 ?
veja aqui sobre colocar musica no bloghttp://www.dicasparablogs.com.br/search/label/M%C3%BAsica
6 de março de 2010 23:29
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.
Ta mt dificil em achar os lugares corretos para colar o codigo !
Fabiano, bom diaQueria 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
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
LP Decor
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!!!
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
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
nayara, o que está branco? a cor de fundo? se for procure por background
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
o arquivo do backup não é para você abrir, é só pra colocar no blog caso alguma das alterações que faça dê errado
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
os CSS podem ser colocados logo depois que fecha a tag body{..}
Sum Cassius
Muito bom essa postagem !!! :Dmais eu queria saber como que poe efeitos no mouse e algum site de onde achar códigos desses efeitos ... alguém sabe aí ?
Sum Cassiusse quiser aqui tem o efeito Imagem seguindo o ponteiro do mouse
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
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?
Achei legal essa dica, vou colocar no meu blog daqui alguns dias.
3 de junho de 2010 22:58
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
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
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
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
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
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
Fabianooooooooooooooooo! Uhuul Eu consegui!!!! Cara muito obrigado, deu tudo certinho, está perfeito! Muitíssimo obrigado!
o trecho é dentro das aspas style="padding-top:20px; background-image:u........
<br><br>???
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
aquela borda faz parte da borda do template, procure .content-inner {padding: 10px 10px;}e tente mudar esses valores para 0
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
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
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
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.
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
Oi,obrigada pela dica! Vou verificar e retorno pra contar se consegui ou não. Abraços!!!
Galo Tunes
como que faço pra colocar esse letreiro no meu bloghttp://www.nackvision.com/ticker/
13 de março de 2011 14:35
é só clicar em gerar código e depois colocar no seu blog pela pagina designer, adicionar gadget, html/javascript e colar o código
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
Índiaa ♥
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 ! ;*
isso depende muito de qual código está querendo colocar no seu blog... tente explicar melhor o que deseja fazer
Marcio CENS
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
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õesmas o outro dono do blog tem que fazer
marciocens
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!
É 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 euAgradeceria muitooooooo
13 de setembro de 2011 18:27
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
Vou tentar colocar as barras espero conseguir.Obrigada.Lindo fim de semana para você
1 de outubro de 2011 13:57
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?
Letícia está na pagina editar html, use o ctrl F para achar
23 de outubro de 2011 14:24
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
BOA TARDE,FABIANO, NAO CONSIGO CONFIGURAR MEUBLOG PORQUE NÃO SEI COMO ACHAR O CODIGO CSS PARA COLAR NA CAIXA PERSONALIZAR AVANÇADOAGORA MEU BLOG FICOU SÓ COM UMA COLUNA HORRIVEL ME AJUDE
4 de julho de 2012 17:13
Sonia Aparecida está na pagina modelo > editar html
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?
Eu não consigo achar .. vc poderia min dar uma dica mais facil ??
24 de dezembro de 2012 16:27
o jeito mais facil de achar códigos é usando o Ctrl + F na pagina editar HTML
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 gadgetsVocê 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
Ilana Polakiewicz sobre o menu aqui tem o código:Menu Horizontal com Efeitos no Blogger usando CSSquando 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
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
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
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
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>