How To Use The New Blogger HTML Editor

Google has announced new improvements to the Blogger Template HTML Editor. It now supports line numbering, syntax highlighting, auto-indentation and code folding. The Option To "Expand Widget Templates", in the Template "Edit HTML" Wizard, is No More.

The new Template "Edit HTML" wizard replaces the single "Expand Widget Templates" option with selective gadget ("widget") expansion. Now referred to as "folded" code, a concealed widget code section is identified by a fold marker ("sideways arrow icon"), next to the line number.

Hints on using the new template HTML editor

If you want to search for a code in the HTML editor, click inside the editor, click the "Format template” button, press CTRL F on your keyboard and enter what you want to find in the search box that appears inside the editor. Then, hit the "ENTER" button on your keyboard.

CSS rules are also folded and you can find them at the top of the template.




Below is a screenshot of the new HTML editor:

To see the new template HTML editor, click the “Template” tab on the Blogger dashboard, then the “Edit HTML” button.

Uses of the buttons of the new HTML editor

There are some new buttons at the top of the template editor!

Some of the buttons have obvious uses — the "Back" button takes you back to your Blogger dashboard, the "Save template" button saves your template. The uses of the other buttons are highlighted below:

  • "Jump to Widget" lets you go straight to a specific widget in your code
  • "Edit Template & Preview Template" toggle these buttons to switch from the html view of your blog to a preview of your blog with the changes you've made to your template.
  • "Format Template" cleans up your code to make it easier to read and search. It does not add or remove anything.
  • "Revert Changes" lets you delete your unsaved changes to your template. This will be very useful whenever you notice a mistake in your preview!
  • "Revert Widget Templates to Default" clears all of your changes to widgets and resets them to their original state.

In a post on the Blogger Buzz blog, Google software engineers +Samantha Schaffer  and  +Renee Kwang   explained the steps for moving the date of a blog post from above the post title to underneath it, as an example in using the new Blogspot HTML editor.

What's your take on this new editor?


  1. Anonymous4/12/2013

    Looks cool and will try it asap. Waiting for improvements in the comment system.

  2. Nice but seems one still have to study it very well. trying to find ]]></b:skin> but cant find it in the new html editor. pls help

  3. Gotten, 'll try it out later. Please how can you be contacted through e-mail?

  4. AAAAhhh Jide!! i suggest you prepare a tutorial on how to use this new blogger template HTML

  5. That's a great one. You know I almost destroyed my blog with the revert to default theme but I am glad all is well. Cheers!


  6. This is a very nice article on blogger html editor i like your article.

  7. I noticed this when I tried working on one of my blogs. At first I taught it was from the template I uploaded, but was clear on it when I discovered same on my Tech blog NaijaTechBlog.

    I really found this new Blogger HTML Editor sweet. Thumps up Jide!

  8. Thanks and will try it now


Post a Comment

We Love To Hear From You But Don't Spam Us With Links!

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post or you're trying to ask question about an old post, please drop it at our discussion platform here.