Achar e Resolver Problemas com Códigos HTML no Blog

Quando queremos mudar o template ou mesmo fazer pequenas alterações no modelo do blog quase sempre precisamos achar algum código HTML para resolver um problema, por exemplo: retirar um espaço em vazio, descobrir o código de uma cor de fundo ou borda(Código das Cores) ou simplesmente localizar algum trecho do código para poder fazer qualquer outra edição. Mas nem sempre é fácil por isso vamos mostrar como visualizar trechos do HTML diretamente no seu blog como ela é visualizada na internet.

ferramentas uteis para blogs

Vamos mostrar como achar códigos HTML usando o navegador Google chrome, mas outros navegadores como internet Explorer e Firefox tem funções parecidas e recomendamos que façam testes para descobrir qual você mais gosta.

No chrome entre na pagina do seu blog depois entre em ferramentas (do chrome) > ferramentas para desenvolvedor e você verá uma janela que mostra o HTML do seu blog e ao passar o mouse sobre o código HTML você notará que destaca partes do seu blog mostrando o que cada trecho do HTML faz no seu site.

Mas podemos fazer o contrario também, ou seja, clicar diretamente no blog e ver o código HTML daquele trecho. Para fazer isso clique na ferramenta que parece uma lupa no rodapé da pagina e depois clique no seu blog para ver o HTML daquela parte da pagina e não se preocupe enquanto estiver usando a lupa o clique não vai para o link da pagina só mostra o HTML.

Nas janelas laterais você pode ver o estilo CSS utilizado naquela parte do seu blog e assim descobrir como retirar bordas, trocar cor de fundo ou qualquer outra alteração na formatação do seu template.

Então depois que tiver uma idéia de qual código quer modificar entre na pagina editar HTML do blogger e use o Ctrl+F para achar o HTML no seu blog. Porém o blogger usa tags próprias no HTML então os trechos podem não ser exatamente iguais. Portanto procure pelo nome dos estilos, por exemplo: body{ e não pelo conteúdo deles: font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; color: #222. Isso porque no html do seu blog tem tags do blogger e pode ser diferente de quando visualizamos a pagina.

Sobre modificar templates e alterar códigos html veja também:
Onde colocar os códigos no blog
Designer de modelo - Layout e Configurações Avançadas
Mudar template do blog - Designer do modelo
Erros no Blogger - Códigos Duplicados

Sabemos que isso não resolverá todos os problemas justamente por isso recomendamos testar as ferramentas para desenvolvedores de outros navegadores também, pois são um pouco diferentes e assim você poderá descobrir com qual delas consegue trabalhar melhor, mas certamente esse método para localizar partes do HTML do blog é muito útil para fazer alterações de template e localizar códigos de maneira rápida e bem mais simples.

As imagens que usamos neste tutorial foram feitas em nosso outro blog: Frases Curtas.

79 comentários:

  1. Minha dica é só clicar com o botão direito no lugar que deseja resolver e clicar em Inspecionar Elemento, ou simplesmente apertar a tecla F12.

    ResponderExcluir
  2. sempre é dificil mexer no html rsrs mas a dica ajudou eu acha um espaço vazio era uma div sem nada dentro rsrs

    ResponderExcluir
  3. Iago Melanias
    o F12 também abre o painel mas tudo é questão do que cada um se acerta melhor em fazer.

    acho o inspecionar do firefox bem interessante também.

    ResponderExcluir
  4. mas sem duvida o painel tem informações bem mais completas

    ResponderExcluir
  5. Gostei ,ja sabia disso,descobri sozinha,rs'mais foi hein'
    Poderia passar em meu blog?

    http://tutoriar.tk
    blogger:http://tutoriar-oficial.blogspot.com

    hihi é só escolher (:

    ResponderExcluir
  6. Sim Fabiano, não gosto muito do complemento Firebug (complemento que ativa essa função no Firefox) pois não acho que tenha tantas funções como do google chrome e também não gosto do design dele, apesar de ele ser o primeiro complemento que fez isso, mesmo antes do google chrome.

    ResponderExcluir
  7. Eu uso o plugin Firebug é quase a mesma coisa mas é mais fácil de mexer.

    Abraços!!!

    ResponderExcluir
  8. Fabiano,sempre quando posto ao vizualizar a postagem fica um sinal de interrogacao no final do texto isso aconteceu depois que eu tentei postar gifs numa outra pagina.O que deve ser isso? Me blog é esse http://vidafranca.blogspot.com/ valeu

    ResponderExcluir
  9. eu também gosto do firebug, como falei cada navegador tem o seu sistema para ajudar a desenvolver sites.

    ResponderExcluir
  10. Vida na França
    entrei no seu blog e não vi o ponto de interrogação, acho que você já resolveu o problema

    ResponderExcluir
  11. Fabiano no final de cada post
    "Beijos meninas e divirtam-se nessa sexta-feira :)" tem la o sinal de interrogacao

    ResponderExcluir
  12. no internet explorer aparece uma imagem no final que não abre

    img src='54490-51-6D0B7F8B459AB8BE49515E083A10BB84 ' style='border:0px;'

    talvez seja isso.

    ResponderExcluir
  13. Fabiano valeu,é para fazer exclusao de algo?ja fui no editar postagem p ver se tem algo gravado porém nao tem nada,me ajuda hahaha

    ResponderExcluir
  14. você precisa achar esse trecho no seu blog e apagar ele deve estar antes de

    < div class='post-footer' >
    < div class='post-footer-line post-footer-line-1

    mas é complicado dizer exatamente o que é porque o html no blogger é diferente do que posso ver sua pagina na internet

    ResponderExcluir
  15. Eu usava isso muito antes de começar meu blog.
    Só que eu não fico apertando isso tudo
    Eu aperto F12.
    E no Firefox, tem que baixar o Firebug.

    ResponderExcluir
  16. Fabiano, eu quero fazer um banner só que eu não tenho nenhuma imagem como base vc tem algum site que eu possa fazer minha própria imagem/banner???

    Abç e obg

    ResponderExcluir
  17. Minha pergunta é , eu baixei um template , instalei , to usando normalmente, veio um botao click aqui para mais informações e para fazer o download, bom eu nao qria akilo no meu template, peguei o link dakele botao , procurei no html e tirei ele , deu certo ele nao aparece mais , só que agora embaxo das postagens na sinopse em vez de aparecer o botao nao aparece nada mais se passar o mouse por cima aparece um link ainda la , qria saber como tirar para sumir e nao ter mais akele link q se passar o mouse por cima tem um link ... obrigado desde ja ..

    ResponderExcluir
  18. e tambem eu me esquesi de te dizer , eu fiz os testes , no chrome e no mozilla nao aparece nada só o link se passar por cima do mouse , mais no explorer aparece um link pequeno de uma imagem quebrada , queria resolver este problema e nao deixar nada ali ...

    ResponderExcluir
  19. talvez o botão seja em flash então não tem o link no código. procure por url com o final .swf (que é o flash) e claro poderia ser também um javascript (.js)

    ResponderExcluir
  20. ei cara minhas postagens ta com bug!!no inicio ao inves de mostrar 7 jogos mostra 1 e os outros jogos não aparecem,mesmo se entrar na pag 2 ou 3 ta muito bugado,eu tenho postado 4 jogos e apareceu 1,se eu entrar em outra pag ele fica normal mas não com meus jogos pq?ele só mostra o da semana passada,exemplo:Postei um jogo,depois postei mais um,ele não aparece só o que fis por ultimo e nao aparece em nenhum pag como arrumo?ja coloquei até o template normal mas da na mesma!

    ResponderExcluir
  21. tipo, ali onde ia o link da imagem eu tirei e só botei o nome Continue Lendo, ai agora no explorer aparece akela imagem quebrada , olha como é que ta no html

    ' AQUI IA O URL DA IMAGEM EU TIREI ' / > Continue Lendo ...<


    ai agora depois que eu tirei , no explorer aparece um link quebrado uma imagem quebrada nao teria como tirar essa imagem quebrada ? engraçado que é só no explorer , chrome e mozilla ta normal..

    ResponderExcluir
  22. se colocou a imagem é só apagar a alteração do texto que fez ou trocar a url da imagem por uma que funcione

    ResponderExcluir
  23. CsJogoseDicas
    talvez não seja possivel carregar varios jogos na mesma pagina. caso eles dependam de arquivos externos podem gerar conflitos.

    acho melhor usar o resumo da postagem e colocar um jogo por postagem

    ResponderExcluir
  24. Ta blz! vlw,mas queria que ficasse normal :(

    ResponderExcluir
  25. e mesmo so deu para ver as outras em 1 pag só,vlw,mas não tem como faser nada para colocar ao normal?? o cod ta assim agora!:

    <script type='text/javascript'>
    var home_page="/";
    var urlactivepage=location.href;
    var postperpage=1;
    var numshowpage=4;
    var upPageWord ='Anterior';
    var downPageWord ='Próxima';
    </script>
    <script src='http://dl.dropbox.com/u/3626153/scriptsdireto/Tutorial%20Para%20Tudo/pagenaviv202-min.js' type='text/javascript'></script>

    ResponderExcluir
  26. pode ser um problema neste arquivo externo http://dl.dropbox.com/u/3626153/scriptsdireto/Tutorial%20Para%20Tudo/pagenaviv202-min.js se for não tem como resolver

    tente achar outro tutorial sobre numeração é a melhor saida. mas no momento é um pouco complicado fazer isso porque o blogger está fazendo alterações nos comentários e logo deve sair outra atualização portanto é possivel que alguns códigos voltem a dar problemas

    ResponderExcluir
  27. não é era a imagens tipo:era pag: 1 2 3 ... mas vlw :( vou ter que faser outro site

    ResponderExcluir
  28. ei eu deletei umas postagens ele volto ao normal oque tava errado nas postagens????agora to com medo de postar e acontecer a mesma coisa oque fasso??

    ResponderExcluir
  29. O pq só quando coloco as imagens ele da o erro???ele ta normal agora mostrando 10 postagens mas quando coloco uma imagem qualquer ele da o erro ficando so 1 postagem pq??

    ResponderExcluir
  30. precisaria editar o template e procurar o erro que pode ser em varios lugares, mas não sei dizer qual é.

    dependendo acho mais facil trocar o template porque é bem estranho variar o numero de posts por causa da imagem

    ResponderExcluir
  31. Realmente as dicas foram muito úteis. Muito obrigado. www.VALEU.com.br

    ResponderExcluir
  32. eu tenho uma ultima duvida, nakela imagem que vem no template , embaixo da postagem , escrito assim click aqui para fazer o download , eu tirei a imagem , botei só com letras , Continue lendo , só que esta colado na sinopse do filme, queria saber como deixar akilo escrito uma linha abaixo da sinopse? Vlw !!

    ResponderExcluir
  33. Yago
    se quiser pode retirar ou trocar a imagem

    ResponderExcluir
  34. só qro saber como deixar isso uma linha abaixo da sinopse pra nao fikar colado

    ResponderExcluir
  35. Yago
    coloque um < br / > antes da imagem, isso deixa uma linha vazia

    ResponderExcluir
  36. É possível fazer história em quadrinhos, online e postar no blog?
    Caso seja possível você conhece algum site, para me indicar?

    ResponderExcluir
  37. Euzi Pink
    é possivel fazer afinal história em quadrinhos são apenas imaegns.

    mas a questão é fazer as imagens. você pode usar um programa de edição de imagens

    ResponderExcluir
  38. No Firefox essa ferramenta está em Ferramentas> Desenvolvedor da web > Inspecionar (ou CTRL+Shift+I).
    Eu achei muito bom, não posso dizer se é o melhor pois nunca experimentei dos outros navegadores, mas gostei da interface dele... E parece ter todos os recursos do Chrome (mas não sei dizer com detalhes, tô começando a uzá-lo agora).

    Mil Sweetkisses,
    www.docesonhodemenina.com.br

    ResponderExcluir
  39. Fabiano me ajude só... já tentei fazer isso mas ñ estou a conseguir encontrar o códio. No meu blog há um enorme espaço vazio entre os 3 primeiros posts. Aqui está o link: http://nacynhoproducoes.blogspot.com/

    ResponderExcluir
  40. em templates personalizados pode haver erros...

    mas a divisão não é para postagens feitas no mesmo dia? ou em dias separados?

    ResponderExcluir
  41. Oi Fabiano. Em primeiro lugar, parabéns pelo blog. Super útil!!
    Obrigada também pelo seu carinho em responder as perguntas dos que o seguem. Muita gente tem blog mas nem se preocupa em responder aos comentários.
    Aproveito para lhe pedir uma orientação, por gentileza.
    Como faço para colocar aqueles botõezinhos no topo da página, que ficam um do lado do outro, tipo HOME CONTATO SOBRE O BLOG etc?
    Não sei nem como chama aquilo para procurar melhor.
    Vc poderia me ajudar, por gentileza.
    Agradeço desde já sua atenção.
    Meu e-mail: misflowerbazar@hotmail.com

    ResponderExcluir
  42. MISFLOWER BAZAR
    depende de que forma quer colocar isso.

    poderia ser um menu normal, mas se quiser colocar com imagens fixas aqui tem um código

    Fixar botões no canto da pagina

    ou veja também:
    Links lado a lado (menu horizontal)

    ResponderExcluir
  43. Bom dia FAbiano Gostaria Que vc fizesse uma video aula de como colocar uma imagem na postagem mas que tenha um textos dentro assim como nesse site.
    http://bleachproject.xpg.com.br/multimidia/episodios-01/

    Agradeço por tudo e esse blog é 10

    ResponderExcluir
  44. para escrever dentro da imagem tem que usar um programa para editar imagens

    ResponderExcluir
  45. Fabiano, olha o que me aconteceu , não consigo mais editar meu HTML e queria colocar os comentários do Face e do Blogger juntos : Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "body" must be terminated by the matching end-tag "". Como resolve ?

    ResponderExcluir
  46. Pixel Ds
    faltou algum detalhe, por exemplo sinal ' < / " ou coisa assim. que deixou a tag aberta.

    o código para usar os comentarios juntos tem varias etapas, faça uma por vez salvando assim será mais fácil achar o erro.

    ResponderExcluir
  47. Fabiano, entrei no meu blog e fui mudar a cor do texto, a fonte e tudo mais.
    Foi quando vi que mudou tudo!
    Fiquei toda perdida e procurei alguém que soubesse me ensinar algo a respeito.
    Só consegui saber que agora o Blogger cobra para termos acesso à mudanças de Layout (?!).
    Me falaram também que é possível fazer alguma coisa através do HTML. Mas eu fico tão perdida com esse HTML! Tenho o maior medo de apagar ou bagunçar tudo até não ter mais jeito.
    Fui abrir um outro blog também e não consegui.
    Algo aconteceu que não completava o "Criar Blog"
    É verdade que agora temos que fazer como comprar um domínio, pagar (R$ 9,00 ao ano)?
    Não pelo valor, mas eu fiquei confusa.
    No caso eu achei até interesaante a possibilidade dele virar .com


    Obrigada

    LM

    ResponderExcluir
  48. você não precisa comprar (registrar) o dominio.

    se quiser usar um endereço .com.br em vez do blogspot então precisa registrar, mas não é obrigatório, veja aqui: Qual a Melhor opção para Registrar Domínio do seu Blog

    ResponderExcluir
  49. Fabiano sou eu de novo.
    Acho que não foi possível no dia você me responder as duas perguntas. Vou refazê-la porque não tenho usado o blog desde então.
    Estou toda atrapalhada com a nova página de trás "Blogger". Mudou tudo!
    Eu vi uma coisa lá que está escrito "Remover para modelo antigo". Será que eu posso clicar alí e ele volta a ser como antes???
    Eu quero mexer no layout, no modo "avançado" para mudar a cor do texto, a fonte... mas do jeito que ficou não dá para mexer em mais nada.
    Me falaram que se eu não quiser "pagar" para ter esse serviço, eu posso mexer no HTML e colocar algum código que eu possa ter de novo essas ferramenteas de cores, fontes e tudo mais como era antes.
    Se, clicar nesse "Remover para modelo antigo" for o suficiente, vou achar ótimo, embora me dê um medão danado de clicar alí e anos de blog apagarem.
    Por favor, me ajude em mais isso. Agradeço sua atenção.
    Eu realmente estou toda enrolada para postar, depois dessa porcaria dessa mudança.


    LM

    ResponderExcluir
  50. Anonimo
    você tem duas opções para voltar ao modelo padrão do blogger.

    entrando na pagina modelo e clicando em personalizar vejá o texto e o link:Você personalizou este modelo.Remover personalizações

    ou na pagina editar html aparece o link Reverter modelos de widget para o padrão

    mas você pode salvar seu template com as alterações que fez, veja aqui:
    Fazer Backup ou Colocar Template no Blogger (Novo Painel)

    assim quando editar seu template e chegar numa aparencia que goste faça um backup antes de fazer mais modificações então se fizer novas alterações e não gostar ou tiver qualquer problema com o template poderá enviar para o blogger novamente esse arquivo que baixou e voltar ao seu template atual. veja mais detalhado no link acima sobre backup.

    ResponderExcluir
  51. Oi Fabiano, desculpe, mas ou eu não entendi a sua resposta, ou não me fiz explicar direito na minha pergunta.
    Vou tentar de novo.
    Eu não fiz modificação alguma no meu blog.
    Eu simplesmente entrei lá, de um dia para o outro, e "a página" de trás - quando clicamos em "Designer" para chegar onde colocamos gadgets, códigos HTML, etc, da "lateral do blog" - estava diferente.
    Mudaram tudo. Está ruim para entender.
    Por exemplo:
    Não tem mais aquela opção de ir para Layout-Avançado e escolher cores do texto, cor de borda, cor do fundo, nada disso.
    Também está difícil de encontrar entrada para outras coisas tais como, Configurações, Perfil, Minha Conta.
    E eu vi num cantinho lá escrito assim (em azul) Remover para Modelo antigo. Mas eu estou com medo de clicar alí e fazer besteira. Entendeu?
    Eu não mexi em nada lá. Eu só queria ir na página de Layout Avançado para poder modificar (como eu sempre fazia), cores, fonte das letras, isso aí. Tudo bem que eles mudem, mas para blogs novos né? De repente eu entro lá e vi tudo modificado, me perdi toda. Eu não percebi, ou ainda tem esse local para eu usar?
    Acho que não tem não.
    Eu fucei em tudo (sem clicar em nada novo) e não achei essa opção.
    Eu estou com ele parado desde então, porque eu PRECISO usar aquela parte e fico preocupada de fazer besteira irreversível.

    LM

    ResponderExcluir
  52. OPS! Desculpe-me.
    Enviei antes de te agradecer muitíssimo.

    Abs
    LM

    ResponderExcluir
  53. Olá fabiano voce poderia me ajudar pois eu fiz um menu e os liks ficaram assim moved of deleted vaja no meu blog: poktudo.blogspot.com por favor me ajuda a resolver?

    ResponderExcluir
  54. Iazaro entre na pagina editar html e procure por:


    .sidebar .LinkList a {
    padding-left:20px;
    padding-top:0px;
    background: url('http:// Tivira na Imagen') center left no-repeat;}


    na linha background: url('http:// Tivira na Imagen') era para ter um endereço de imagem e estar mais ou menos assim:

    background-image: url(endereço da imagem);

    ResponderExcluir
  55. você poderia me passa um link para eu colocar no lugar de ('http:// Tivira na Imagen') por favor e porque nao estou conseguindo achar um link para colocar nesse lugar.

    ResponderExcluir
  56. eu coloquei essa imagem http://i46.tinypic.com/bfs2me.png
    mas ficou do mesmo jeito

    ResponderExcluir
  57. hospedei e coloquei a imagem, mas so que ficou do mesmo jeito

    ResponderExcluir
  58. Dá para você editar para mim por favor, pode colocar qualquer imagem:

    link do meu template:

    http://www.mediafire.com/?o3lbbub59me9wkv

    ResponderExcluir
  59. o código correto para imagem de fundo é sim:

    background-image: url(http://i46.tinypic.com/bfs2me.png);

    ResponderExcluir
  60. então deve ter algum outro código de imagem de fundo que está atrapalhando ..

    veja se tem outras imagens de fundo com o mesmo tipo de erro

    ResponderExcluir
  61. só o link mesmo
    que esta moved of deleded

    ResponderExcluir
  62. hospede a imagem diretamente no blogger.

    envie a imagem para uma postagem ou pagina extra e depois copie o endereço

    ResponderExcluir
  63. muito obrigado
    deu tudo certo salvou a vida de meu blog você é demais!!!

    ResponderExcluir
  64. Fabiano, Como disse me ajudou muito!
    outra duvida, como eu consigo fazer com q o blog nao se desconfigure ao abrir em monitores e navegadores diferentes, para q as configurações de tamanho fiquem estaticas?

    valew

    ResponderExcluir
  65. João para o blog ficar igual em todos os navegadores tem que usar valores em pixels nas larguras do seu template, por exemplo width: 800px;

    se o seu blog está mudando de formato deve estar em %

    ResponderExcluir
  66. meu html esta todo colorido muito estranho nem sei mexer mais! oq eu faço faz 3 dias q está assim e não consigo + personalizar pois ele ta diferente.como faço pra ele voltar a ser como era antes?? pode me ajudar por favor!
    http://criativaearteira.blogspot.com.br/

    ResponderExcluir
  67. Roseangela Lima a pagina editar html foi modificada pelo blogger. Não tem como voltar.

    veja mais detalhes aqui:
    Mudanças na Pagina Editar HTML do Blogger

    .

    ResponderExcluir
  68. Olá Fabiano, eu estou a procura de um script ou um motivo no meu HTML que faz com que seja mostrado um código no final de todas as minhas url's ex:
    nas páginas
    .html#.UW15JaLU8rY
    max-results=40#.UW16UaLU8rY
    /search?q=pesquisa#.UW16xaLU8rY
    com.br/p/páginasestaticas.html#.UW17LKLU8rY

    Isso não ocorre na página inicial, não consigo identificar o motivo e acho esse código muito desagradável, vi algumas pessoas com problemas parecido ao meu mais a solução não se encaixou a meu problema. Agradeço a atenção!

    ResponderExcluir
  69. André Araujo isso é gerado pelo addthis.

    olhe o código que colocou no seu blog e apague esse linha:

    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>


    isso é uma forma de rastrear os cliques e copias de links. Mas isso não atrapalha em nada o blog

    ResponderExcluir
  70. Valeu Fabiano agradeço de coração, eu estava procurando uma solução à vários dias e nada de encontrar, o que me encanta aqui no Dicas Para Blogs é a rapidez em que você traz as respostas e o respeito que você tem com seus leitores, já disse varias vezes e vou dizer novamente o Dicas Para Blogs é o melhor blog para se aprender a ser blogueiro.

    ResponderExcluir
  71. Fabiano estou tendo sérios problemas no item Page Speed Insights do meu blog:pede para corrigir diversas coisas, ativar a compactação,otimizar imagens, compactar javascript, compactar HTML, etc... Não sei como resolver estes problemas. Por favor, preciso da sua ajuda. Obrigada Adiléa.

    ResponderExcluir
    Respostas
    1. infelizmente nem todos os problemas são possíveis corrigir no blogger.

      destes que citou o mais fácil é otimizar imagens:
      veja se elas estão no tamanho correto (veja aqui: Problema com o Tamanho das Imagens nos Posts do Blogger)
      use um programa para editar as imagens e salvar num formato mais leve (normalmente .jpg ou .gif)

      Excluir
    2. Então tenho que olhar no computador em geral? Crio minhas imagens e salvo no formato jpg. Vou olhar direitinho. Muito obrigada!!!

      Excluir
  72. Olá alguém poderia me informar como faço para excluir o campo Mais informações do meu blog . Quero que quando as pessoas entrem vejam os posts seguidos mais não , está aparecendo o link de cada post e esse botão de mais informações , ai que a pessoa consegui visualizar o post completo . Obrigada

    ResponderExcluir
  73. se foi um template que baixou pronto seria mais fácil trocar o template.

    infelizmente não tenho como dizer qual é o erro pois os códigos variam um pouco em cada template

    ResponderExcluir
  74. Oi, mexi no html do meu blog e agora não consigo visualizar as postagens. Consigo editá-las e mexer em todo o blog, mas não consigo visualizá-lo na página inicial. Nem eu nem ninguém. Socorro. :'( https://silviamirianluxo.blogspot.com/

    ResponderExcluir
  75. tente achar no html do seu blog

    .content-fauxcolumns {
    position: absolute;

    apague a linha position: absolute;

    ResponderExcluir