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.
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.
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.
Marcadores: Códigos, Configurações Avançadas, CSS, Html, Personalizar