Todos nós blogueiros temos costume de fazer edições em nossos blogs, e isso nem sempre é uma tarefa fácil, tendo em vista que o Blogger, para cada edição, você tem que clicar em Visualizar para que você veja tudo como ficou, e, se ainda não estiver bom, tem que editar de novo, e visualizar de novo.
Isso é uma tarefa muito desgastante!
As vezes dá até vontade de não alterar nada só para não ter que se dar ao trabalho de ficar visualizando toda hora.
As vezes dá até vontade de não alterar nada só para não ter que se dar ao trabalho de ficar visualizando toda hora.
Finalmente, depois de alguns meses nessa penosa prática, encontrei uma solução:
A Ferramenta do desenvolvedor.
O que é Ferramentas do desenvolvedor?
Atualmente, os browsers(navegadores) estão inovando não somente na interface, mas também na estrutura de sua navegação, levando novos recursos aos desenvolvedores de sites e afins. Para você conseguir acompanhar nossas dicas, você necessitará de um navegador que tenha esse recurso.
No meu caso, uso aqui o Google Chrome, ou Firefox, ou Maxthon, que são os navegadores que eu identifiquei com essa ferramenta, onde também se pode alterar valores encontrados na página de um site.
O objetivo aqui, afinal, será o seguinte: Ao invés de você ficar usando o visualizador do blogger, clicando e alterando toda hora, você usará a ferramenta do desenvolvedor sobre o item que você deseja editar no seu blogger e, em seguida, aplicará as mesmas configurações no blogger depois que o resultado foi o desejado usando as ferramentas.
Usarei como exemplo o Google Chrome, mas os outros citados possuem o mesmo modo, não diferindo em muita coisa.
Será necessário algum conhecimento naquilo que se deseja editar; ou seja, se é CSS, é necessário conhecer de CSS, se é HTML, HTML, e, se é Javascript, Javascript.
- Abra seu Google Chrome na página desejada; clique sobre o item que deseja editar com o botão direito do mouse e selecione inspecionar elemento.
Usarei o banner desse site como exemplo:
- Após fazer isso, você verá uma porção de códigos HTML, ou qualquer que seja a linguagem, logo abaixo.
Se preferir, puxe a barra um pouco para cima para visualizar melhor o código do seu blog.
Observe que o item que você selecionou com Inspecionar elemento ficou marcado na página.
Se você quiser fazer de novo o procedimento de clicar com o botão direito e Inspecionar, você irá fazer com que o Google Chrome envie você novamente para o código
HTML referente ao item da página (isso é bom para ter certeza de qual item você está editando).
- Há agora duas maneira de editar o item: Você dá um duplo clique sobre a parte que quer editar ou então clique com o botão direito e escolha Edit as HTML.
Essa segunda opção fará que o código inteiro seja aberto para edição. Ainda há mais uma opção, que é Edit Attribute, que também tem o mesmo efeito do duplo clique sobre.
- Vamos então editar o tamanho da altura da imagem (height), para que você possa ver como a alteração funcionará.
Que ficará assim height: 52px;
Ao fazer isso, você notará que o página foi alterada imediatamente, ou seja, em tempo real.
Mas é claro que isso não afeta o seu site, porém será uma visualização temporária.
- Agora que você já tem o código editado, você poderá copiar ele clicando sobre a tag (Aberta) onde você quer copiar.
Nesse caso, você não selecionará toda a tag até o final, como num texto de site, mas você clicará na tag que inicia (estando todos os elementos dentro da tag).
Por exemplo:
<div>
<br>
<b>Abelhudos da informática e Ferramentas do desenvolvedor</b>
</br>
</div>
Mas é claro que isso não afeta o seu site, porém será uma visualização temporária.
- Agora que você já tem o código editado, você poderá copiar ele clicando sobre a tag (Aberta) onde você quer copiar.
Nesse caso, você não selecionará toda a tag até o final, como num texto de site, mas você clicará na tag que inicia (estando todos os elementos dentro da tag).
Por exemplo:
<div>
<br>
<b>Abelhudos da informática e Ferramentas do desenvolvedor</b>
</br>
</div>
- Nesse caso, você clicará na sentinha (>) do Google Chorme atrás de
e copiará.
Se você colar no bloco de notas, você verá que o código será copiado completo.
Nessa parte, antes de você colar o novo código obtido no seu blog, sugiro que você cole no Notepad++ (programa indicado por Gerenciado Blog em 5 Ferramentas Grátis para apoiar o seu blog), para conferir o fechamento correto de todas as tags.
- Também outra possível solução após editar a página com Ferramentas do Desenvolvedor, é você salvar o
HTML (do jeito que você editou será salvo).
Para fazer isso, basta clicar com o botão direito sobre qualquer parte da página e clicar em Salvar Como.
- Agora, sem ter que ficar visualizando toda hora, você poderá colar o seu código no Blogger.
É importante salientar que, nesse tutorial, foi usado uma simples mudança de tamanho de exibição de imagem, porém você poderá fazer mudanças incríveis com essa Ferramenta do Desenvolvedor, de maneira que talvez nenhuma outra conseguirá.
Eu, agora, poderei terminar de fazer o frame em DIV "Sobre o Autor" usando essa técnica nova, pois poderei, perfeitamente, editar cada detalhe, como posição da foto, distância da margem e outros itens importantes.
O uso dessa Ferramenta do Desenvolvedor será muito bem aptada (e complementará significativamente) a alguns tutoriais ensinados nesse blog:
Como ocultar/exibir uma DIV no Blogger
Padronizando uma formatação para postagem do Blogger
Como Criar um popup flutuante para o Blogger
Javascript: Criando botões animados para o seu blog
A abelhinha implantada no template recentemente foi bem posicionada graças a utilização dessa ferramenta do desenvolvedor. Eu recomendo!
Por favor, dê sua opinião e deixe também abaixo os resultados obtidos com o uso dessa ferramenta.
Marcadores: Dicas para blogs