Há diversas vantagens em utilizar o Google Chrome como navegador de internet.
Ele é leve, rápido e tem ótimos recursos.
Para quem tem um blog, há vantagens adicionais.
Uma delas é o recurso de “Inspecionar elemento”, muito útil para encontrar trechos para customizar em seu blog e fazer simulações de como ele ficará após as mudanças.
Entenda neste artigo como utilizá-lo.
Antes de ler o artigo, sugiro que veja este vídeo sobre extensões do Chrome. Ele tem pouco mais que 1 minuto mas trás informações muito úteis.
Por que usar o Google Chrome?
Atualmente, mais de 70% dos visitantes do Gerenciando Blog já utilizam o Google Chrome.
Trata-se de uma ótima escolha: é um navegador capaz de mostrar corretamente os sites, com ótima velocidade e sem deixar lentas outras aplicações.
Além disso, ele possui ótimos recursos adicionais.
Um deles são as extensões, que permitem adicionar mais funcionalidades ao navegador.
Mostrei algumas delas no artigo Extensões do Google Chrome Úteis para seu Blog.
Outra funcionalidade fantástica – e que apresentarei neste artigo – é a opção “Inspecionar elemento”.
Ela facilita muito o trabalho de customização, pois permite localizar exatamente o trecho de código a ser alterado.
Permite inclusive fazer a alteração no próprio Chrome, para você ver como ficará o resultado final.
Por tudo isso, se você ainda não usa o Google Chrome, dê uma chance a ele. Faça o download e instale-o a partir do link http://www.google.com/intl/pt-BR/chrome.
Como utilizar o “Inspecionar elemento”?
Usar o recurso é muito simples.
Faça um teste aqui neste artigo que você está lendo mesmo.
Clique no título deste tópico, por exemplo, com o botão direito do mouse e escolha a opção “Inspecionar elemento”.
Você verá uma janela parecida com a abaixo. À primeira vista, pode não fazer muito sentido para você. Mas, os próximos itens explicarão melhor cada parte da tela.
A área à esquerda mostra o código-fonte de sua página, de forma estruturada.
Você pode ver quais áreas estão dentro de quais. No exemplo, pode-se ver uma tag H2 (com o subtítulo da postagem), dentro de uma DIV de anúncio, dentro de uma DIV post-body e assim por diante.
Note que, se você simplesmente passar o mouse sobre essas tags, a área correspondente a elas será destacada em azul na postagem original.
A área à direita mostra o CSS correspondente à tag que está selecionada à esquerda.
Se você não sabe do que estou falando, trata-se do código que determina as características visuais do código, como cor, fonte, tamanho etc.
No artigo CSS no Blogger: o que é e como usar há mais detalhes sobre o assunto.
Neste caso específico, veja que é aí que diz que a fonte é vermelha, com 120% de tamanho e em negrito (bold).
Como fazer simulações de alteração?
Aqui começa a parte realmente interessante da funcionalidade.
Imagine que eu não queira mais a cor vermelha para os subtítulos, e queira deixá-los agora na cor azul.
É possível fazer isso para ver como ficará.
Basta clicar no código ff0000, que está à frente de “color”.
Você verá que será possível editar o valor:
Preencherei a caixa com o valor #0000FF, correspondente ao azul. Depois, é só pressionar “ENTER” para aceitar.
Veja que agora todos os subtítulos do artigo que você está lendo ficaram na cor azul.
Fácil né?
Mas, note que isso é apenas uma simulação.
Essa alteração só está visível na janela atual e não será aplicada ao blog.
Para fazer a alteração em definitivo, é necessário editar o HTML do template (veja detalhes em Como editar o HTML de seu template no Blogger), fazer a alteração nesse mesmo ponto e salvá-lo.
Para localizar o ponto certo a alterar, basta localizar a tag pelo nome que ela apareceu no inspecionar elemento.
Neste exemplo, a tag foi .post-body h2.
Conclusão
Aqui, fiz apenas uma rápida demonstração do potencial que a funcionalidade “Inspecionar elemento” oferece.
Quando você entende o mecanismo, há muitas outras coisas que você pode fazer.
É possível inserir propriedades novas no CSS, eliminar propriedades e muito mais.
Na área esquerda da tela, você também pode mover os elementos de lugar, remover áreas inteiras etc.
São ótimas formas para você fazer avaliações rápidas de como ficará o seu template após alterações.
O melhor de tudo: você pode mexer sem medo com ela!
Como nada fica gravado, não há risco nenhum de você prejudicar o seu blog. Se você fez algo e não ficou satisfeito com o resultado, basta recarregar a página e tudo voltará ao normal.
E você, já conhecia o “Inspecionar elemento”?
Consegue ver outros usos para ela?
compartilhe sua experiência em um comentário.
Leave feedback about this