Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Novo Blogger Vanessa S.

Mudanças e Melhorias no editor HTML do Blogger

Melhorias no editor html do Blogger. A equipe do Blogger fez algumas alterações na estrutura e na organização do código fonte, melhorando completamente o editor HTML.
Quem tentou editar o html do template no dia de hoje deve ter se deparado com mudanças no editor HTML do blogger.
Dentre as mudanças verificamos algumas melhorias como a numeração de linha e destaque de sintaxe, tornando a edição HTML do seu modelo muito mais fácil.
A opção “Expandir modelos de widgets”, no novo modelo de editor HTML não é mais necessária.

No painel do Blogger, clique no menu “Modelo”, em seguida, clique no botão “Editar HTML”, para ver o novo modelo de editor HTML:

01

Os botões agora aparecem no topo e ficaram mais destacados:

02

Ficou mais fácil fazer uma pesquisa de texto, para localizar algum trecho específico. Se você clicar em qualquer parte do editor HTML e em seguida pressionar as teclas “Ctrl + F”, abrirá uma caixinha de pesquisa dentro do próprio editor HTML do Blogger.

Melhorias no editor html do blogger

Para os usuários que preferem fazer alterações no seu template, através do editor HTML, vão perceber que ficou mais fácil realizar edições.
É importante lembrar que o Blogger usa tags personalizadas e antes de começar a mexer na estrutura HTMl do seu blog, é importante estar familiarizado e conhecer Os Elementos de Página do Blogger.

Conhecendo a função de cada botão no novo editor html:

botoes

1. Voltar: fecha a tela do editor e retorna para o menu “modelo”.
2. Salvar Modelo: botão para salvar as modificações realizadas.
3. Ir para um widget: Usado para localizar um determinado widget rapidamente. Ele abre uma lista com todos os gadgets/widgets que estão instalados no seu blog.
04

4. Editar modelo: quando selecionado ele exibe todo o código fonte do seu blog.
5. Visualizar modelo: com este botão você visualiza as modificações que está realizando, antes de salva-las. Essa função é muito importante, pois é sempre bom visualizar as modificações antes de salvar o modelo, desta forma, se algo não tiver dado certo, você não irá salvar as modificações.
6. Formatar modelo: se você clicar neste botão e em seguida usar as teclas “Ctrl+f” abrirá a caixa de pesquisa do próprio editor, que serve para localizar tags, trechos de códigos dentro do HTML do seu template.
03

7. Reverter alterações: com esse botão é possível limpár todas as modificações que você realizou enquanto não tiver salvado nada, ou seja, enquanto estiver apenas no modo de “visualização”.
8. Reverter modelos de widgets para o padrão: ao clicar neste botão, você estará restaurando um modelo de template padrão do blogger, ou seja, seu template será automaticamente trocado por um template padrão do Blogger, e vai perder todas as alterações que tenha feito anteriormente.

Como localizar o Código CSS no novo editor:

Na coluna de numeração das linhas, em algumas partes você notará que aparecem um simbolo (como uma setinha preta).
Se você clicar neste simbolo verá que tem a opção de expandir/esconder determinados trechos de códigos.

05

Geralmente quando vamos fazer alguma alteração ou inclusão de código CSS, orientamos sempre a localizar a tag </b:skin>

Se você usar o botão “Formatar Modelo” e as teclas “ctrl+F” e colocar a tag </b:skin> dentro da caixinha de pesquisa (conforme já explicado no tópico anterior), vai conseguir localizar a linha exata onde a tag está, e verá que aparece a setinha preta, basta clicar nela que expandirá todo o código CSS existente no seu template.
Tudo o que tiver acima desta tag </b:skin> diz respeito ao trecho CSS do seu template, ou seja, o código CSS fica entre as tags <b:skin> e </b:skin>

Bom é isso.
O que acharam destas mudanças? Deixe sua opinião nos comentários.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

51 Comentários

  1. amiga, estou tentando ha muito tempo e não consegui ainda tirar aquele nome postagem mais antigas do meu blog. olha, eu lí o seu artigo fui lá no blog, mais não consegui, procurei o dia todo e não encontrei nesse novo modelo a palavra [oldpagetitle]
    que é pra apagar e colocar outra a meu gosto. me envie por email bem detalhado pra mim. abraços

  2. StyleMen disse:

    Ainda não segui, procuro no meu HTML do modelo, mais não encontro o codigo.

    styleemen.blogspot.com.br

  3. Olá a todos. Tentei seguir todos os procedimentos tal como descritos nesta mensagem mas no meu caso não resultou inteiramente. Penso que o formulario na minha pagina contactos esteja a funcionar devidamente: http://besttopptcwebsites.blogspot.pt/p/contacto.html mas no final da minha sidebar ficou um restinho do gadged do formulario google, parece que está minimizado, a que se deve tal resultado?

  4. Amei sua dicas para os blogs, só que , parece que alguns posts precisam ser atualizados para a nova interface do blogger, porquê é meio difícil encontrar as ferramentas que você cita, mais que na nova interface não existe, ou está em outro local, que não consigo encontrar! ;/

    Beijos e abraços!! Continue com seu trabalho explÊndido!! 🙂

  5. Karina disse:

    Já encontrei a resposta na sua outra postagem, “https://www.mundoblogger.com.br/2011/09/instalar-novo-template-pela-nova-interface-do-blogger.html”, mas obridada na mesma 🙂

  6. Karina disse:

    Olá, bom dia
    Ainda não tive muito tempo para mexer nesse novo interface e queria saber como é que salvo o modelo para o meu computador ? Essa opção ainda existe ? Desde já obrigada ^^.

    • Oi desculpas, por estar respondendo seu comentário em vez da AUTORA, mas sei a resposta para sua pergunta e pretendo ajudar.
      Bom, clique em MODELO>>FAZER BACKUP/RESTAURAR(basicamente no canto superior direito perto de seu perfil)>>FAZER DOWNLOAD DO MODELO COMPLETO. ENTÃO É SÓ SALVAR!

      P.S: ESPERO TER AJUDADO!! ^^’

  7. Luiz Oliva disse:

    Obrigado pelo apoio, foi muito útil suas dicas.

  8. Tenho o blog a bastante tempo e percebi que há muito lixo no código.
    Queria reiniciar tudo para instalar os widgets novamente.
    Como faço isso?

  9. Tiago OLiver disse:

    Bom dia . Gostaria de sua ajuda .
    Hoje eu me deparei com grande pepino, eu passei 6 meses sem sem trocar e sem altera a templete do meu blog, e hoje eu percebi que estava tudo muito diferente. (COMO MUDAR A TEMPLETE DESSE NOVO BLOGGER)?

  10. Uélinton disse:

    Bom dia, pow fui alterar ontem o layout do blogger e me ferrei está com um bug que não permite alterar o template.
    Já tentei com 35 templates diferentes e toda hora o mesmo erro, eu entro em editar html e coloco o código de um novo template e o botão salvar modelo não funciona. :O SOCORRO!
    ai o print!

    • Vanessa disse:

      Lamento, mas não tenho como te ajudar. Sugiro que vc reporte seu problema diretamente no Fórum de ajuda do Blogger.

  11. Adler disse:

    Sera que não precisa mesmo “expandir todos os widgets”? Porque não estou localizando partes do código que vejo em tutoriais pela internet.

  12. olá vanessa. boa noite.
    me diz como faço agora para colocar uma barra derolagem na lista dos blogs que eu sigo a fim de economizar espaço.? por favor fico desde já agradecida, aguardando resposta. eliene

  13. Gustavo Cunha disse:

    Ficou péssimo este novo modelo de alteração de código HTML do Blogger.
    Está muito mais dificil encontrar os blocos de código, vai dificultar a evolução e criação de novas funcionalidades.
    Que pena que não pode voltar para o antigo modelo.

    Parabéns pelo Mundo Blogger !

  14. Eliezer TJ disse:

    Olá Vanessa

    Tentei ocultar widgets em páginas específicas nesta nova interface do blogger, mas não funciona.

    Ou oculta em todas as páginas ou simplesmente não oculta nada.

    E olha que coloquei os códigos corretamente várias vezes nos dois blogs que tenho.

    Que acontece?

    Obrigado

  15. Manu disse:

    amiga querida adoro seu blog, amor, to querendo por uma assinatura no meu blog mas adivinhe só com essa mudança o que eu faço??? kkkkkkkk não estou coseguindo pq antes era só clicar em expandir modelo de wiget e agora amiga?? que faremos?? aonde vamos clicar para por nossa assinatura? Vc sabe?? por favor me ajude!! bjuss

  16. Parabéns pelo artigo agora estou entendendo mais ou menos essas mudanças. Obrigado 🙂

  17. veeey de boa… esse blogger é muito maça. eu amo por que sempre me ajuda em tudo e até agora foram poucas as coisas que eu precisei e aqui não teve.
    amo O Mundo Blogger

  18. Ernandes disse:

    Ficou 10!!!
    Eu sempre gosto de mecher nos códigos, estudá-los, e principalmente inserir outros elementos diretamente no código, isso vai facilitar e muito a edição deles.

  19. Raí Carvalho disse:

    Bem, o Blogger tentou mudar para melhor , em partes melhorou , mas esse troço ai todo colorido ficou muito mais confuso pra quem não está acostumado, espero que depois de um tempo eu me acostume com isso, mas acho que essa mudança não era necessária, talvez não dessa maneira.

  20. Charles disse:

    Muito obrigado Vanessa.

  21. Paulo Santos disse:

    Muito bom este artigo! Eu acho que para as pessoas que estão começando a mexer com blog agora,e ainda não fizeram aquelas primeiras edições que são necessárias no HTML isso poderá facilitar e orientar melhor,tomara que seja assim né? Abraço e sucessos a todos!!!

  22. como faz para voltar para o editor antigo, ou não tem como mais?? poxa desse modo esta parecendo com o wordpress

    • Vanessa disse:

      Não tem como voltar mais.

      • Vanessa!!!
        Que horror estou frita amiga!
        Abri o blog esses dias e quase cai de costas amiga.
        O resumo de postagens ocupando de um lado ao outro,e ocultando os menus,os folders,a imagem de joseph murphy e os formularios de contato.
        Quase enlouqueci pensando que dessa vez o super layout da Ariane,havia desmoronado.
        Pensei:PHUDEUUUU!

        Ri alto porque atè agora a bagunça ta tomando conta,e tenho medo de mexer nos codigos para ocultar elementos e postagens,na home e esconder nas postagens internas.

        Frio na barriga!
        Mas em breve tudo vai voltar as boas mesmo tendo,que quebrar mais a cara.
        Ser blogueiro ainda do blogger è isso!

        Ai meu santinho

  23. natalia disse:

    como faz para centralizar a imagem no novo blogger 2013, pois eu não estou conseguindo

  24. Não gostei! o blogger está igual o facebook, muda muda muda… e nada de melhorar

  25. myllena disse:

    Me ajuda, por favor… Por que TODAS as tabelas no blogger em CSS e HTML que eu coloco ficam fora do lugar? no dream fica td certinho…

    • Vanessa disse:

      Lamento, mas alguns casos só é possível encontrar alguma resolução testando, e por não dispor de tempo para isso, no momento não estou prestando este tipo de suporte.

  26. Sandro disse:

    Acho que ficou mais complicado programar o html e inserir codigos css… Quem concorda?

  27. FABIO disse:

    não consigo mais achar as palavras no contra f no html, quero colocar redes sóciais nas postagens

  28. VitinhoO disse:

    E como faz para expandir modelos de Widgets ?

  29. Luanda disse:

    Véi, pensei que por um momento tinha acabado o CSS. Ufa!!! Que alívio

  30. Israel A. disse:

    Como instalar um template em ?????

  31. Matheus disse:

    Galera ficou muito mais fácil, ficou show !

  32. Josenildo Requião dos Santos disse:

    E eu pensei que fosse algum problema no meu template. Obrigado por esclarecer essa minha dúvida cruel.

  33. Nossa, que maravilha! Ainda não tinha visto! Isto vai facilitar, e muito, especialmente visualmente, as alterações que precisarmos fazer no editor html!
    Parabéns pelo artigo, Venessa!
    Abraço!

  34. Paulo Santos disse:

    Excelente artigo,muito útil e bem explicado,já salvei,para estudar quando tiver mais tempo,é bom conhecer as funções para saber depois o que fazer,muito obrigada pelo post,abraço e sucessos!!!

  35. Eu gostei bastante das modificações, ficou bem parecido com o editor html do tumblr! Agora ficou bem mais fácil principalmente pra quem é meio leigo no quesito HMTL!

  36. schreiyarai ? disse:

    Só o fato de terem dado destaque à sintaxe no código já dá uma mão na roda enorme! Quem nunca se confundiu com um espaço ou um par de aspas que atire a primeira pedra…
    O recurso para encontrar widgets também vai facilitar muito a nossa vida, já sofri muito com isso… hahaha
    Não sei se você notou também, mas quando se clica no “Visualizar modelo”, a visualização abre na própria área onde fica o código ao invés de uma guia à parte.

  37. anny disse:

    Yo, interessante, não abri o html do meu blog hj, mas como estava caçando um dia para atualizar uns itens, creio que agora ficou mais facil *-*, e sua explicação foi bem clara e simples, como deveria ser para todos enterdermos *-*, obrigado

  38. Dani disse:

    Não gostei mesmo do formato da visualização, péssimo, não tem como abrir o blog, visualizar na caixinha é para ver cor, no máximo, achei ruim mesmo, interfere no layout, e não nem um pouco profissional!!!

  39. sibele disse:

    bom dia!! muito obrigada por toda explicação adorei as alterações ficou muito mais simples e pratico.

  40. Katherine disse:

    Oi Vanessa,

    Adoro seu blog, muita coisa útil e fácil de entender ainda mais para mim que sou um tanto leiga e novata em blogs.

    Gostava muio mais da versão anterior do editor de html. Mais fácil
    para eu achar o que queria e agora com o novo estou totalmente perdida,nem sei por onde começar. Com todas aquelas setas e letras coloridas, tenho dautonismo só de olhar.

    Será que não existe meio de reverter para o anitgo?

    Mais um vez obrigada e parabéns pelo site.

  41. Marcelle disse:

    Não gostei, particularmente. Mas adorei o seu post, que me deu uma clareada. Aluás, adoro todo o blog, que sempre me ensinou muita coisa, parabéns!

    Beijos,

    Marcelle

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.