Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

Achar códigos no blogger pode ser um desafio, mas existem ferramentas que ajudam a encontrar os problemas do código HTML ou qualquer outro tipo de código sejam imagens, vídeos, player de musica, enfim descobrir qual é o código de cada parte do site. Já mostramos anteriormente como Achar e Resolver Problemas com Códigos HTML no Blog usando uma ferramenta do Google Chrome então hoje vamos mostrar outra opção para ajudar a resolver os problemas com códigos no seu blog.

ajuda com códigos do blog

Recomendamos que vejam também:
Erros e Duvidas Comuns sobre Blog - Ajuda para Blogueiros
Erros no Blogger - Códigos Duplicados

Vamos falar sobre o Inspecionar elementos do Firefox que é simples de utilizar. Você só precisa entrar na pagina do seu blog clicar com o botão direito do mouse e escolher a opção inspecionar de elemento.

Veja na barra no final da pagina tem o botão Inspecionar então clique nele e depois passe o mouse sobre a sua pagina então você verá que o mouse seleciona automaticamente trechos do seu blog então clique em alguma parte do seu blog pode ser uma imagem, link ou qualquer outra coisa.

como usar o inspecionar elemento do firefox

No outro canto dessa barra do Firefox aparecem 3 opções: visualização 3D, HTML e Estilos que usaremos para fazer testes e encontrar os códigos. O botão HTML mostra o código do trecho selecionado da sua pagina e o botão estilos mostra o código CSS, mas essa opção é interessante porque você pode desativar qualquer formatação dos estilos CSS para testar como fica no seu blog e ver a mudança na hora. Por exemplo, na imagem abaixo quando nós desmarcamos a opção de formatação do título das postagens: h1 {font-size: 16pt;}

testar html no blog

Mais algumas dicas para resolver problemas do seu blog:
Como usar e o que é Redirecionamento de Pagina (url) do Blogger
Encontrar e Corrigir Links Quebrados no Blogger e no WordPress
Resolver Problemas de Atualizações do Blog por Email ou Listas de Blogs

Esse acessório do Firefox é bem útil para desenvolvedores de sites e blogueiros e achamos que isso pode ajudar a resolver varias duvidas sobre códigos do blogger. Mas é claro isso só vai testar e encontrar os códigos se quiser fazer alguma alteração terá que entrar na pagina editar HTML do blogger como sempre faz. Essas alterações de estilos que falamos aqui são somente testes e não altera em nada o seu blog.

21 comentários:

  1. Ah, o Inspecionar elementos salva a minha vida. Outro dia me ajudou muito para achar o código que modifica a cor do h3 quando está na página da postagem (não no início). Essa ferramenta de editar o código "ao vivo" ajuda muito para fazer testes... Não troco meu Firefox por nada.

    Mil Sweetkisses ♥
    www.docesonhodemenina.com.br

    ResponderExcluir
  2. Qual a diferença do inspecionar elemento do chrome para o do firefox?

    ResponderExcluir
  3. Izaque Liborio as funções são basicamente as mesmas. Então é uma questão de escolha de cada um.

    acho que vale a pena testar os dois e ver com qual deles você consegue trabalhar melhor.

    ResponderExcluir
  4. Ia dizer a mesma cois....Se tivesse um botão de like, Sheila Lima, Ja teria ganhado o meu =D ,

    ResponderExcluir
  5. Olá, mais uma vez preciso da ajuda de vocês. De repente, começou a aparecer propagandas Boo-Box no meu blog, elas não aparecem o tempo todo, mas com alguma frequência, sem eu ter sequer cadastro nesse site. Reparei que era desse site porque quando clico nelas, aparece um redirecionamento dele. Estou preocupado, pois este erro está me comprometendo. Este tipo de ocorrência é comum? Há alguma solução pra isto? Abraços. Segue um Print do blog http://migre.me/95yDT

    ResponderExcluir
  6. tente lembrar quais foram os ´codigos que modificou recentemente no seu blog

    pode ser na pagina editar html ou gadgets de html/javascript

    ResponderExcluir
  7. fabiano,
    instalei o linkwithin,mas os assuntos que aparecem nunca sao relacionados.Tem como colocar para aparecer so assuntos com a msm tag?
    obrg

    ResponderExcluir
  8. a idéia é interessante mas acho que não tem como escolher os posts que aparecem, nem separar por marcadores.

    embora teoricamente o linkwithin deveria usar os marcadores como uma forma de referência

    ResponderExcluir
  9. Vou testar, não conhecia esta ferramenta, sempre aprendendo, por aqui.

    ResponderExcluir
  10. Fabiano qual é a versão do seu Firefox? no meu não apareceu a função "Visualização 3D" e queria ver meu blog em 3D.

    ResponderExcluir
  11. Muito interessante obrigado pela dica vou se aprofundar nessa situação obrigado fabiano

    ResponderExcluir
  12. muito interessante esse recurso fabiano andei mexendo nele e rapidamente já aprendi uma caixa serve para identificar os elementos e outra são as configuraçoes eu já tinha visto esse recurso mais nunca dei muita atenção agora eu entendi para que ele serve obrigado fabiano

    ResponderExcluir
  13. fabiano eu denovo nossa se identifiquei muito com essa função pois seleciono oque eu desejo modificar e pela propria pagina eu modifico e vejo as congirurações de desejo e vo no html do blog e modifico conforme ficou lá na pagina

    ResponderExcluir
  14. olá, eu tou literalmente quebrando a cabeça pra colocar pra funcionar os widgets do facebook.
    no primeiro (widget curtir fan page) depois de muito mexer, consegui colocar e fazer funcionar.
    Ai veio o problema... comentários dos posts via facebook, fiz um q colocou os comentários, só q eles ficavam pra fora do post, aparecendo na home, retirei o código e coloquei em outro lugar e consegui, porem, o comentário feito em um post iam pra todos os outros.
    apaguei o código e fiz pelo tutorial de colocar os coments em abas como está aqui, mas, não aparecia de jeito nenhum... fiz, refiz... peguei exatamente os códigos do tutorial e os retirei e retirei junto outras coisas referentes ao facebook pra poder refazer e... agora tou sem widget curtir do facebook e sem os coments, mas, o problema é... qndo coloco qq código do facebook dá aquele erro de formatação com o final "error 500"... tou a 4 horas só nisso e nada... realmente... preciso de ajuda^^
    o blog q tou montando pra jogar meu dominio pra lá é o djgamella.blogspot.com
    pfv, me dá uma luz, valeu! ;)

    ResponderExcluir
  15. alguns erros são mesmo complicados de achar porque pode ser um detalhe qualquer.

    mas veja que no botão curtir e nos comentários tem um codigo igual ou bem parecido com esse:

    script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1

    então veja se estão os dois iguais.

    além disso precisa procurar os detalhes mas como falamos pode ser muitas coisas diferentes

    tente também excluir seu historico de internet. Como você fez muitos testes talvez você já corrigiu o problema mas seu computador está mostrando seu blog usando o histórico

    ResponderExcluir
  16. Fabiano estou tendo a maior dificuldade para corrigir erros no Page Speede Insights mas o que está mais grave é :Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda. Já quebrei minha cabeça e não consigo acertar. Você poderia me dar uma ideia. POR FAVOR!!! Estou cansada de criar atividades e na renderização perco.Tenho uma média de mais de 4.000 visualizações de páginas ao dia e na hora do resultado fico bem triste! Aguardo resposta. Abraços

    ResponderExcluir
    Respostas
    1. já testei vários tutoriais sobre isso (a maioria em inglês) os poucos que consegui retirar o código faz o blog perder a formatação (aparência).

      gadgets ficam fora de posição, layout bagunçado....

      por isso acabei deixando como é o padrão do blogger.

      Excluir
  17. Fabiano estou apavorada. Estou sentindo que o meu blog (www.misturadealegria.blogspot.com.br) está cada dia pior....comparado ao da semana passada. A página demora pra abrir.... Eu tentei fazer algumas mudanças no HTML e piorou ao invés de melhorar. Minha renda no adsense um fracasso. Diminuiu o número de visitantes.Tenho muitas visualizações de páginas no dia, mas não sei o que está acontecendo. Você me aconselharia mudar o template? Por favor me ajuda!!!!

    ResponderExcluir
    Respostas
    1. sobre a renda com AdSense um pouco é a variação do dólar, ou seja, o dolar subiu bastante então quando entra no adsense e vê suas estatisticas em dolar é normal que tenham diminuido. Afinal 100 dolares hoje é muito mais do que há um ou dois meses.

      acho que deveria aumentar um pouco a largura do seu blog hoje a maioria dos monitores são acima de 1000 px de largura. Aqui no dicas para blogs a largura é 990px.

      mas essas variações em visitas e ganhos tem muitos motivos... o jeito é fazer testes.. procurar saber quais assuntos seus visitantes gostam mais...

      Excluir
  18. Obrigada pelas dicas Fabiano Roberto! Eu consegui fazer um milagre pois tinha realmente este sonho de mudar o visual do blog e acabei mudando de template. Outra coisa que me deixa com dúvidas, eu redimensionei minhas imagens mas mesmo assim eu não posto-as no tamanho médio ou grande. Sempre no tamanho pequeno. Isto altera alguma coisa? Valeu pelas dicas. Um abraço e boa sorte.

    ResponderExcluir
    Respostas
    1. imagens menores normalmente carregam mais depressa e isso é bom para o blog.

      use as imagens no formato .jpg ou .gif que não os mais leves.

      .png quase sempre é bem mais pesado

      Excluir