Blogger just made a big change to the HTML template editor, much to the surprise of many Blogger users — me included!
The new look is a bit startling at first, but don't worry; your template code hasn't changed, it just looks different. Everything is still in the same place it used to be, there are just new ways to get there.
I have updated all of my tutorials that include template instructions, but Blogger tutorials from other sources may not be updated yet. This little tour through the new features will help you translate old tutorials so you can still use them with the new editor.
So, let's take a look at what's new!
Opening the Template
There's one less step in the process of opening the template. Now all you have to do is go to "Template" and click the "Edit HTML" button below your "Live on Blog" screenshot. It used to be that you had to press "Proceed" on an intermediate screen before getting to the template code, but that's gone now.
The New Buttons Up Top
There are a bunch of new buttons at the top of the template now! 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 others need a little explaining:
- Jump to Widget lets you go straight to a specific widget in your code (more on that later).
- Edit Template & Preview Template toggle these buttons to switch from the code 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. It does not add or remove anything.
- Revert Changes lets you delete your unsaved changes to your template. This is your best friend if you catch a mistake in your preview!
- Revert Widget Templates to Default clears all of your changes to widgets and resets them to their original state.
No More "Expand Widget Templates"
Many Blogger tutorials ask you to check the "Expand Widget Templates" box at the top of the template, but that checkbox is gone now. Instead, all of your template's code is accessible when you open the template.
To get to a specific widget within your blog, you can use the "Jump to Widget" button.
This is fairly self-explanatory when you're looking for a default Blogger gadget; just select the name of the gadget you want to edit. But, HTML/JavaScript gadgets will show up in this list by their HTML ID number. There's a quick way to find the right widget ID so you can jump right to the widget you want to edit.
Finding HTML Widgets
To find the ID of an HTML widget, go to your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL.
The HTML number after "widgetID=" is your widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widget's section in your blog's HTML.
Searching the Code
Some Blogger tutorials ask you to look for specific lines of code in your template. There's a built-in search feature in the template now that will take you straight to your line of code and highlight it in yellow to make it even easier to see.
To search for a line of code, place your cursor over the code, click once, and press ctrl and f at the same time (PC) or command and f (Mac) to open the search box.
Type in the code you want to find, then press enter.
The template will jump to your code and highlight it in yellow.
You can use the search box to perform find-and-replace searches, too. You can read more about this advanced option on Blogger Buzz.
Reading the Folded Code
Sometimes, you just need to read through chunks of your code, line by line. As you look through the new editor, you'll notice that the lines of code are numbered. And, you'll see that there are lots of big gaps in the line numbers; for example, a jump from line 13 to line 582. That's because the code is "folded". You can expand folded code by clicking the folder arrows.
In some areas, multiple levels of code are folded into each other, so you may need to "unfold" a few blocks of code to find the section you want. Don't forget, if the folding and unfolding gets tedious, you can always use the search feature to find specific blocks of code.
What Do You Think?
Are you warming up to the new editor? Let me know in the comments!
