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.

<b:skin>—</b:skin>

and

<b:template-skin>—</b:template-skin>

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?