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?

8 Comments

Leave a Reply
  1. 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

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

How To Add HulkShare Music Player Inside Blogger Posts

How I Get Free Skype Credit