Aprenda como Editar os Códigos do seu Site com Precisão e Segurança

Criar Site no Webnode

Aprenda como editar os códigos do seu site com precisão e segurança

Como eu havia prometido em meus dois artigos anteriores, Navegadores são ótimos para identificar problemas no seu site/blog e Aprenda a editar os códigos do seu blog no cPanel hoje vou mostrar que qualquer pessoa com um mínimo de conhecimento e bastante curiosidade pode editar qualquer código do seu site usando ferramentas que estão disponíveis à sua frente e você nem imagina.

Primeiro quero dizer que os procedimento aqui mostrados podem ser feitos por qualquer pessoa, já que primeiro vamos aprender a editar nosso site em modo “visualização” para só depois então integrar nos códigos reais do site.

Tudo o que você vai precisar é ter o navegador Google Chrome instalado em seu computador e acesso ao seu servidor de hospedagem.

O Google Chrome, assim como o Firefox têm integrados em si uma poderosa ferramenta que serve para analisar todos os objetos que compõe seu site, trata-se do Inspetor de elementos, ambos podem ser acessados clicando com o botão direito do mouse sobre qualquer elemento do seu site e, em seguida, na opção “Inspecionar elemento” no menu de contexto.

inspecionar-elemento

Então vamos adiante, vou usar o Criarsites como minha cobaia para mostrar pra vocês como funciona o processo de edição dos códigos do seu site.

As principais modificações que um blogueiro quer fazer em seu site está relacionada ao tamanho, aparência e posicionamento dos objetos do seu site, então vou mostrar como modificar algumas opções referentes aos estilos aqui do Criarsites.

Passo 1. Primeiro abra qualquer página que contenha o elemento que você deseja modificar em seu site, neste caso, eu abri um artigo.

para para editar

Passo 2. Em seguida, clique com o botão direito do mouse sobre o item que você deseja modificar e, na opção “Inspecionar elemento”, no meu caso, vou alterar a aparência do título dos artigos, que aqui é exibido em laranja com uma fonte grande e forte.

inspecionar elemento 2

Passo 3. O Google Chrome exibirá a partir de agora um painel na parte inferior da tela, onde você pode ver toda a estrutura do site, em destaque as opções relacionadas ao item clicado.

painel-de-edição-do-google-chhrome

Lado esquerdo do painel.

lado-esquerdo

Lado direito do painel.

lado direito

Passo 4. É exatamente aqui que podemos fazer qualquer alterações nos códigos do seu site, sem que ele seja de fato alterado, para isto, vamos identificar a entrada principal, que corresponde a tag que identifica o título dos artigos no Criarsites.

título

Passo 5. Ao movimentar o mouse sobre os códigos na parte esquerda do painel, o navegador destacará dentro do site o item que ele corresponde, então eu cliquei no item que está entre a tag H1, o H1 é justamente o que define o estilo dos títulos dos artigos no Criarsites, depois de clicar sobre este objeto, vamos visualizar suas características no painel direito. Note que você também pode navegar a vontade pelos códigos clicando nas setinhas ao lado de cada código afim de exibir todo o seu conteúdo.

exibir conteúdo

Passo 6. Note que neste painel são exibidos todos os atributos do item selecionados, divididos em estilos, qualquer alteração feita nesta área afetará a exibição do site acompanhe.

atributos selecionados

Passo 7. Na imagem acima você vê em destaque o trecho responsável por altar a cor da fonte dos títulos h1 e h2 do site, inclusive a cor de links que tenham recebido o atributo h2. Para fazer a alteração basta clicar sobre o pequeno quadro laranja, que representa a cor atual.

cores style

Passo 8. Você pode editar as cores usando o misturador, é só ir clicando com o mouse sobre as cores e ir acompanhando o resultado no site logo acima.

resultado-da-edição-de-cor

O azul não ficou nada legal né? Então use de bom gosto e defina cores relacionadas ao layout aplicado.

Passo 9. Quando você fizer qualquer modificação, e achar que esta já pode ser adicionada ao seu site, basta identificar onde este código está, assim você poderá incorporá-lo em seu site. Para fazer isso, observe o caminho do arquivo de código logo acima do item que você acabou de editar.

editar código

Basta apontar para este link e ele lhe indicará o endereço exato do arquivo, note que ele mostra a linha onde este código se encontra.

Passo 10. Agora você pode acessar o caminho exibido dentro do cPanl do jeito que eu mostrei no artigo anterior e colocar o trecho de código exatamente do jeito que você vê no painel do inspetor.

editar código 3

Todos os itens que compões um site podem ser editados e visualizados através do inspetor de elementos, tamanhos de widgets, cabeçalhos, área de posts, etc, basta apontar com o mouse e seguir os passos apresentados neste tutorial.

O painel direito pode servir para adicionar atributos também, é só clicar sobre o item desejado e adicionar clicando na área específica do painel.

editar código 4

O próprio painel vai lhe ajudando a completar o código através de sugestões em menus de contexto.

Caso você não saiba o que é ou qual código usar para um determinado atributo ou situação, faça uma busca rápida no Google, tá cheio de sites ensinando como usar um código específico, principalmente os que mudam aparência de texto ou posicionamento de objetos. Aqui o que vale é ser curioso e persistente, se você é preguiçoso, não vai conseguir nada, aliás, acho que um preguiçoso não conseguiria chegar até esta parte do artigo. Rsrsrsrsrs

Então vamos a um problema que comentei nos meus artigos anteriores, lembram do problema que eu estava tendo com imagens no meu site? Os anúncios estavam empurrando as imagens do meu site para fora da área do artigo, veja na imagem abaixo.

resultado no site

Olhe como eu resolvi isto!

Primeiro eu identifiquei o item que precisava ser corrigido através do inspetor de propriedades, clicando com o botão direito sobre uma imagem qualquer em meu artigo e abrindo o inspetor.

imagem

No painel da direita eu pude identificar o trecho responsável pelas imagens que são adicionadas em qualquer artigo, neste caso, identificado como .postBox .postBoxMid img {.

editar código 5

Tá, agora o problema era aprender como corrigir isto, precisava de um código que limpasse a formatação que estava empurrando minhas imagens para o lado. Pesquisei, pesquisei, usei termos bem diversificados, até que um usuário me deu uma luz. Um leitor aqui do Criarsites tinha comentado em um de meus artigos me alertando sobre o problema, até então desconhecido pois só aparecia no Firefox, navegador que eu não usava, ele me disse que eu deveria dar um “Clear:both” para corrigir o problema das imagens.

Então dei mais uma vasculhada até que cheguei a este site, falando como usar o atributo para limpar qualquer item flutuante em determinado objeto. O Atributo Float está presente no anúncio do adsense que está no começo dos meus artigos, esse atributo eu aprendi a usar aqui no Criar sites e serve para deixar texto espaçado ao redor do anúncio, então era ele quem estava empurrando as imagens para o lado, já que não havia texto suficiente no começo do artigo para afastar a imagem para baixo do anúncio.

Daí veio a luz, fiz os testes, adicionei o atributo no inspetor de propriedades e voilá! Deu certo, então acessei o código pelo cPanel no meu servidor pelas pastas do wordpress e adicionei o código ao arquivo real.

Atributo no painel

editar código 7

Atributo no arquivo original através do editor do cPanel.

Problema mais que resolvido, graças a persistência, muita pesquisa, e claro, uma ajudinha de um leitor bem intencionado. E olha que eu nem manjo dessas paradas de código, aprendi tudo blogando e lendo artigos do Criar Sites e do Ferramentas blog.

Há, uma coisa legal no Inspetor de propriedades do Firefox é que ele mostra toda a estrutura do seu site em 3D.

estrutura-em-3d

estrutura-em-3d-2

Legal hein!

Viu? Agora você pode brincar de mudar as fontes, cores, tamanho e disposições de todos os itens do seu sites sem problema algum.

Espero que tenham gostado deste artigo, se tiver qualquer dúvida ou sugestão, deixa um comentário aí em baixo.

Um grande abraço a todos!

Este é um guest post escrito por Liute Cristian que bloga no Clube do Design.

Sobre Liute Cristian

Paraense, criado no Amapá, designer gráfico a mais de 6 anos, sou autodidata e exerço as profissões de Designer gráfico para impressão e Professor de informática. Adoro o que faço e acredito que não há melhor coisa do que trabalhar com algo que lhe satisfaça. Blogueiro por acaso, hoje não sei viver sem. Me satisfaço ao saber que meu trabalho e esforço ajudam muita gente a aprender e querer ainda mais ingressar neste ramo. Visite meus perfis nas redes sociais: twitter, facebook, youtube ou google+
Adicionar a favoritos link permanente.

37 Comments

  1. Maurício Rodrigues

    O Cpanel tem vários aplicativos e é uma ótima pedida quando não queremos instalar programas em nosso computador como o Notepad ++

  2. Ótima dica!!!

    Ainda estou apanhando para mexer nos códigos do meu blog, mas um dia eu chego lá abraço!

  3. Eu gosto de usar o Firebug no Google Chrome, acho ele mais completo.

    No meu Firefox não aparece essa opção de visualizar o blog em 3D, qual é a sua versão?

    Abraços!!!

  4. Rafael Oliveira

    Existem diversas formas de se editar códigos e apesar de já ter feito dessa forma, sempre é bom ter um tutorial para nos guiar quando encontramos alguma dificuldade.

    Abraços e parabéns pelo artigo.

  5. internet marketing

    Mas voltando ao principal objetivo dessa postagem, mostrar como editar seu template de maneira fácil, não será necessário instalar nenhum programa específico no computador, mas sim no navegador. Se você usa o Firefox, terás que baixar uma extensão chamado “Firebug”. O firebug é uma ferramenta de grande utilidade para programadores web,, assim como é de grande utilidade para min criar templates. Com ele podemos identificar erros e editar qualquer site. Sendo assim, ele pode servir para interpretar sua página antes que de você alterar qualquer código no seu HTML original.

  6. Celso sou afiliado do comprafacil, e eles disponibiliza um arquivo xml que é atualizado diariamente, mais eu não sei como colocar no wordpress, o arquivo é igual ao do shopping uol, o criar site tem algum post que ensina a fazer este tipo de implementação de codigo?

    Att

    Gabriel

  7. Gabriel Martins

    Ufa…que “artigão” amigo..dava pra dividir em dois rsrs… nossa eu não sabia que esta funcionalidade do Chrome de “inspecionar elementos” era tão eficiente assim, vou explorar um pouco mais..e também não sabia que o Cpanel tinha essa função meio “dreamweaver”, como completar o nome dos codigos etc..bem bacana.

    abraço

  8. consegui fazer as alterações, só não sei como salvar e ao atualizar voltou ao normal.

  9. Evandro S. Ricardo

    Consegui fazer uma mudança importante em um tema do wordpress p inspecionar elemento do chrome, mas percebi q depois q atualizado a página ele volta como era antes… No caso eu teria q estar logado no meu Cpainel? de que forma q é salva a mudança feita pelo “inspecionar elemento?”

    • Olá Evandro,
      A Alteração no template deve ser feita através do painel de controle do WordPress. O Navegador não salva a alteração no template. É apenas temporário e vista apenas por você.

      Abraço!

  10. Felipe Magalhaes

    Oi , Gostaria de saber , se tipo eu pegar um código html de um sit .Dá pra min editá-lo ?
    Qual programa ?
    Como ?
    Explicando melhor , Eu criei um sit no Wix . Ai eu aperto F12 aparece o codigo certo ?
    Eu queria saber se com esse codigo , eu possa criar um Novo sit , Entendeu /?
    Da uma ajuda pra min , Por favo … Tou esperando resposta no meu Email… PfPFpF

    • Olá Felipe,
      Até dá, mas você teria que entender melhor sobre como essas coisas funcionam. Não tem como te passar por aqui, você teria que fazer alguns cursos.

      Abraço!

  11. Boa tarde amigo,
    Primeiramente gostaria de te parabenizar pelo artigo, MUITO BOM!
    Agora eis a minha dúvida, não estou conseguindo colocar as alterações no código da página.
    Minha hopedagem é do HostGator, possuo o Cpanel, mas não como introduzir as mudanças no código, estou realmente precisando de ajuda!

    Muito obrigado desde já

  12. Jp Saraiva Imoveis

    Tenho um dominio proprio que está alugando um sistema de site imobiliario.
    gosto bastante do layaut e da parte administrativa que tem diversas ferramentas adequadas á minha atividade, mas o preço de locação do sistema está caro de mais.
    minha pergunta é a seguinte
    tem como manter o mesmo sistema e layaut fora da administradora com alteração de alguns codigos?

    • Olá JP Saraiva,
      Não tem como você fazer isso a não ser que utilize outro sistema de gerenciamento de imobiliárias. Acredito que todos sejam pagos.

      Abraço!

  13. coloquei um banner no cabeçalho do meu blog, mas quando clika no artigo já tem um banner do artigo, então o artigo aparece dois banners, o banner do cabeçalho e o banner do artigo.Eu to quebrando a cabeça pra fazer o banner de cabeçalho aparecer só na home e nas páginas de categorias e bloqueá-lo nos artigos. Alguém pode me dar uma mão?

    • Olá Leonardo,
      Acredito que você possa adicionar a publicidade em um arquivo específico do template que exibirá a publicidade somente na inicial. Procure pelo arquivo main.php, index.php, default.php ou outro deste tipo.

      Abraço!

  14. Olá, Boa tarde

    Minha duvida é se eu fizer a alteração no meu site
    ela é definitiva?
    Por que o meu objetivo é Mudar algumas palavras e fontes para meus clientes visualizarem.
    Gostaria de algumas dicas. Obrigado!

  15. adorei sua matéria sobre esse assunto, mais ficou uma dúvida quando aparece inline:170 e não style.css ou layout.css você sabe o que é? agradeço desde já a atenção

  16. Meu Deus vocês não têm noção de como salvaram minha vida agora! (assim mesmo, bem exagerado. kkk). Muito obrigada!

  17. rafael stromdahl

    Olá, estou com uma dúvida. Carrego no meu site arquivos less que estão em um servidor com protocolo seguro (https). Faço o carregamento com o caminho absoluto.

    A minha dúvida é que no console, não aparece o nome, nem o número da linha o qual está a regra que estou editando. No seu lugar aparece um código como se estivesse no head da página (aparece isso: aqui deveria estar as tags de abertura e fechamento do estilo style>…</style ).

    tens alguma ideia do que eu posso fazer para reparar esse problema?

  18. Elizabeth ferreira

    Olá, Boa Noite ! Me diz uma coisa como eu mudo o Nick ou o meu apelido no Yahoo Respostas através do código fonte, eu fiz como vc ensinou, e fica com o firebug ou modo botão direito, só que quando eu atualizo a página volta tudo o que era antes, lembrando que O Yahoo Profile foi desativado, será que é por isso que eu não consegui ? mas eu já vi tantos usuários mudando de nick, acho que eles entendem de programação, gostaria que me ajudasse.

  19. Paulo Rogério

    Olá Celso, essa dica foi muito boa, mais não estou conseguindo mudar o código no cPanel, abri o link ” Aprenda a editar os códigos do seu blog no cPanel” mais não achei a matéria. Poderia enviar essa matéria? ” Aprenda a editar os códigos do seu blog no cPanel”

  20. Uma dúvida, com apenas um layout eu consigo fazer 3 sites diferentes? Editando apenas o conteúdo de cada um!?

  21. boa tarde galera estou criando um site no wordpress e cheguei na pagina de widguet e preciso colocar codigo de conteudo e codigo de imagem como fazer ajuda nois galera

    • Olá Mauro,
      Você precisa adicionar um widget de texto. Depois é só colar o código desejado dentro do box e salvar.

      Abraço!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *