Mudanças no Editor HTML de Templates do Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

A equipe do Blogger fez modificações na visualização do código fonte de templates, melhorando o “Editar HTML” e dando maior controle para fazermos alterações. Algumas coisas são novas e deixam mais seguras a forma como mexemos na estrutura de códigos, incluindo a separação por cores de acordo com o tipo de código e como encontrar os trechos importantes. Para quem é iniciante ou não entende muito de programação, ficou ainda mais simples melhorar o layout do Blog.

Esta é praticamente a primeira “novidade” no Blogger em 2013, tendo em vista que o ano de 2012 foi muito agitado e cheio de mudanças nesta que é a mais popular das plataformas de Blogs. Vamos apresentar e analisar as mudanças e novidades desse Editor HTML para que você aprenda a usar todos os recursos disponíveis.

Aproveite para dar sua opinião nos comentários sobre o que achou das novidades e mudanças.

Basicamente trata-se de uma melhoria visual e na organização do código fonte dos templates. Ficou mais fácil fazer modificações no HTML, encontrar linhas de código e mexer nos gadgets/widgets (Elementos de Página) e identificar os tipos de código que compõem o layout.

Se você clicar no menu “Modelo” e depois clicar no botão “Editar HTML”, verá que tudo está mais integrado ao painel de controle do Blogger e ficou mais simplificado:

Então poderá ver o novo editor HTML do Blogger:

Que abrirá a seguinte parte, semelhante à imagem abaixo:

Este é todo o código fonte do template do seu Blog. É o que faz a estrutura do layout, organiza cada elemento e permite modificações diretas em praticamente tudo o que tem em seu blog ou que você quiser adicionar ou excluir.

O menu “Layout” ainda continua funcionando normalmente e, para quem não quer mexer com códigos, poderá continuar usando a estrutura visual do Blogger. Mas nem sempre o que queremos modificar pode ser feito só por tirar e colocar Gadgets/Widgets (Elementos de Página). De vez em quando algumas mudanças precisam ser diretamente no código, seja inserindo, modificando ou excluindo trechos de HTML e CSS, entre outros tipos de códigos.

Todas as funções ficaram em botões bem destacados e grandes no topo da área de códigos, onde tudo está mais visível e fácil de identificar.

  • Voltar = retorna para o menu “Modelo”, fechando a tela de edição do código fonte.
  • Salvar modelo = ele tem uma cor destacada dos demais e é o mais importante. Mas ele não precisa ser usado sempre que fizer alguma modificação. Você verá abaixo que é possível ver mudanças no layout antes de salvar e não correr o risco de estragar seu blog. Portanto, o botão “Salvar modelo” é o último recurso a ser usado quando mexer em algo no código fonte.
  • Ir para um widget = abre a lista de elementos de página, os Gadgets que estão em seu layout. Com isso é mais fácil escolher o gadget e ir direto para a parte onde está o código daquele elemento, sem precisar procurar linha por linha.

Menu Widget do Editar HTML do Blogger

  • Editar Modelo = é o botão que exibe o código fonte. Com ele marcado você sempre verá o código fonte. É nele que temos a opção de expandir todos os trechos de código ou esconder outros. Antes existia uma marcação, mas agora está mais evidente em cada parte. Note a imagem de exemplo que segue:

Perceba que da linha 51 há um salto para a linha 564. Esse salto, marcado pela seta indica que há códigos escondidos bem nesse ponto.Se clicar na seta esse trecho será expandido e você poderá ler todas as linhas que estavam ocultas, inclusive modificá-las uma por uma.

  • Visualizar modelo = a cada nova edição e modificação é possível visualizar o layout do seu blog antes de aplicar a mudança. Significa que você pode ver como está ficando e se vai funcionar sem precisar salvar e correr o risco de estragar o template.
  • Formatar modelo = com esta opção marcada é que são feitas as buscas por linhas e trechos de códigos. Usando os atalhos “Ctrl+F”, é aberta um pequeno formulário onde você pode digitar ou colar o trecho que quer encontrar no código.

Procurar trechos de código no Editar HTML do Blogger

  • Reverter alterações = volta para o momento em que o seu código estava, caso você não se lembre quais partes excluir para voltar ao normal se algo der errado. Por isso mesmo que é importante visualizar as mudanças antes de salvar, pois agora é possível voltar sem colocar seu blog em risco.
  • Reverter modelos de widgets para o padrão = se a mudança for feita em algum elemento de página, em algum gadget do seu template, então pode clicar nesse botão para que  Blogger restaure para o padrão.

Uma duvida que pode ter surgido é a nomenclatura de widget para os elementos de página dentro do código. Basicamente dá na mesma chamar de Gadgets ou Widgets.

Penso que tais mudanças vão facilitar o uso de códigos no Blogger e mantem nossa liberdade de modificar como queremos as linhas. Mesmo com algumas limitações de recursos, podemos ter um layout de qualidade em nossos Blogs.

.

42 Comentários

  1. Eu Gostei da Mudança, mas estou um pouco confuso, hoje fui editar meu template e levei um susto com a mudança, olhei e acabei desistindo de mexer no HTML, estava mais acostumado com o geito de editar anterior, acredito que quem seja um pouco leigo em códigos como eu possa ter um pouco de dificuldadade.

    Responder

  2. fazia tempo q nao entrava no blogger e vi o novo layout do editor do html. Bateu uma dúvida de como alterar o código então passei por aqui antes. A minha surpresa foi descobrir q vc tinha acabado de postar sobre isso! Grande Lemos! Sucesso

    Responder

  3. Nossa, já veio tarde um editor “gráfico” pro blogger.
    Pois antes quer quisesse editar teriar de abrir o código em um editor de text/html e mesmo assim tinha trabalho, pois o código em .XML não era reconhecido direito. Agora assim fica mais fácil de realizar edições e até mesmo criações de templates no próprio blogger.

    Responder

  4. Puxa tomei um susto e achei que eu que tinha feito alguma coisa, hoje é que começou essa forma no editor.
    Estava mexendo até na configuração de SEO/Preferencias seguindo suas recomendações qdo deparei com essa inovação, achei até que eu tinha mudado alguma coisa, ufa!!!

    Responder

  5. Não gostei do seguinte: ao clicar para visualizar modelo, ao invés de abrir uma nova aba no navegador, é atualizado na própria página de edição, dificultando enxergar e editar com maior precisão os detalhes.

    Ponto negativo quanto a esse aspecto. Agora só mexendo para acostumar.

    Responder

    • eu tambem nao gostei, a visualizaçao abre na mesma pagina do html, e depois se clicar em voltar ele fecha tudo, mudanças desnecessarias, vao estragar o blogger.

      Responder

      • Concordo! Também não gostei disso! O que ficou bacana foi a separação por cores facilitando entender o código. Mas isso de mostrar na mesma página as alterações ficou péssimo, principalmente porque se clicar no voltar, fecha o editor e perdemos as ultimas alterações. Outra coisa ruim é que o Ctrl+F não funciona!!! Principalmente por causa dos código que estão ocultos(sem expandir)! E esse botão ‘Editar modelo’ não funciona, não serve pra nada! Eu fazia todas as mudanças no template direto no Editor HTML, agora com esse novo editor ficou péssimo e tenho que fazer as mudanças todas no Notepad++ e depois colar no editor. Odiei essas mudanças!!!!!

        Responder

        • Penso que isso deverá ser um BUG do sistema. Deverão alertar o Blogger para isso. Eu não sou criador de templates nem mexo muito com este código por isso não me preocupo muito mas esta parte se funcionasse bem seria excelente para quem gosta de mexer demasiadamente no código do template no Blogger.

          Responder

  6. Marcos, ao final do texto você falou sobre ter um template de qualidade no Blogger. Eu tenho uma dúvida sobre isso: é possível criar banco de dados no Blogger de alguma forma?

    Responder

  7. Marcos, gostaria de agradecer pois você me ajudou muuuito! Como alguns colegas colocaram, me espantei quando vi a mudança e, ainda pior, foi procurar algo sobre e não encontrar explicação. Foi quando me lembrei do “Ferramentasblog”. Parabéns pelo conteúdo atualizado!

    Responder

  8. Eu sempre tive muito medo de mexer no HTML, pq nunca entendi qdo diziam, coloque tla código imediatamente abaixo de tal código. Como assim???Mas será que agora vai ficar mais fácil, mesmo para pessoas que como eu, não entendem e ainda por cima morrem de medo? Mas sua postagem está maravilhosa, parabéns…

    Responder

  9. Simplesmente Horrivel este novo padrão. deveriam deixar pelo menos uma opção de voltar para o antigo editor de HTML, Este novo editor é um lixo, tentei mudar uma coisa que sempre mudava antes e agora simplesmente não consigo, até que consegui, mas ele desculpe a espresão mas F**** com meu blog, apagou sozinho o codigo de resumir a postagem que tinha custado encontrar e editar, fora o xat que tambem nao abria mais na lateral, eu fui bobo de nao ter salvado o modelo antes de editar, sorte que eu tinha um modelo salvo, que deu pra voltar com algumas coisas.

    Responder

  10. Ficou supinpa esse novo editor. O antigo, em que abria um estilo de janela pop-up era cheio de problemas e bugs. A estrutura de edição agora ficou no estilo do programa Notepad++. O unico fato que fiquei na dúvida foi sobre o download do template. A opção de baixar ou enviar um modelo sumiu.

    Responder

    • Khyn,

      O botão “Fazer backup/Restaurar” ainda está no mesmo lugar. Badta clicar no menu “Modelo” que você verá o botão no canto superior direito. Isso não mudou.

      Responder

  11. Já vi em outro blog, que esse novo modelo não está funcionando bem no Google chrome.Não seria o caso de vc Marcos Lemos, fazer um post ensinando como trabalhar nesse HTML? Eu por exemplo, tenho muita vontade de aprender. Também não sei como recolocar o blog salvo, caso aconteça algo errado. Fica aí a sugestão…Bom domingo

    Responder

  12. ja achei! consegui! poxa acho que ficou melhor msm! fiquei 3 dias sem mexer no meu blog pq a principio achei difício! mas com sua dica e meu esforço to conseguindo
    Brigadão!

    Responder

  13. Marcos, antigamente usávamos o “expandir modelos…” para, por exemplo, colocar o código do Ads depois do título do post. Fazíamos isso inserindo o código depois no line-1. Ou estou muito cego ou sumiu mesmo esse trecho do código?

    Responder

  14. Pingback: Como encontrar códigos no novo Editar HTML do Blogger?

  15. Por enquanto o que eu não curti foi, como citou o Ronaldo lá em cima, que ao clicar em ‘visualizar modelo, ao invés de abrir uma nova aba no navegador, é atualizado na própria página de edição, ‘

    De resto é esperar na hora de editar pra ver se ficou realmente mais simples pra mim

    Responder

  16. Eu só vi essa mudança hoje.
    Não mexia no meu blogger a algum tempo, e até me assustei.

    O que estou na dúvida é o seguinte:
    Como fazer o BACKUP agora?
    Só copiar normalmente aquele código?
    E as partes que ficam escondidas com as (…), vão ser copiadas juntas?
    Preciso fazer algumas modificações arriscadas, então preciso fazer o backup, mas não sei como fazer isso agora.

    Podem me ajudar?

    Responder

    • Eu concordo contigo que é um pouco mais confuso mas só o é porque removeram a opção de «expandir modelos de widget». Eu até gostei da parte em que permitem navegar mais facilmente entre os respetivos gadgets.

      Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.