The New Blogger Template Editor

The first major update to the Blogger Template Editor since 2006 . Loosely referred to as Edit HTML , it has gone though a complete makeover. The previous Editor appeared as a lightbox-style window and was pretty similar to the version available before Blogger switched to the new look back in October 2011. This update is a full-blown overhaul with build from scratch approach bringing a whole new set of features to the table


The Technology Behind the Editor

The New Template Editor is using CodeMirror , a JavaScript component which provides an in-browser Code Editor. It has been modified a bit to add some Blogger specific functionalities ( Preview Template & Jump To Widget ) but the core appears to be same. Shifting to CodeMirror , which is open source and has a active development community around it ( Check it on Github ) is surely nothing less than awesome. It is used by sites like CodePen , CodeSchool , CSSDeck , JSBin as well as Google Apps Script just confirms the fact that it is ready for big-time use.

Update : After a mail from us pointing out this change , Marijn Haverbeke ( The person behind CodeMirror ) has added Blogger to the list of Real World Use Cases of CodeMirror.


The New Features

The New Editor is aimed at making Creation & Editing Blogger Template a lot easier for user with less experience in coding HTML/CSS/JS . Some of the specific additions are

1. Jump To Widget

Finding code related to a specific widget has become very easy , Just open the Jump To Widget Dropdown and select the widget of your choice. By making jumping to specific Widget Code block, it becomes easier for users to add code to render widget on specific page  (Earlier it was a bit overwhelming to go through a lot of code to add those conditional tags )

2. Expandable Code Segments 

The ability to exapand code makes the Template Editor look less cluttered and more clean. Current once you expand the code , there is no ability to collapse it again . May be they will add that in the future

Update : As Samantha Schaffer , one of the Google Intern responsible for creating this new Editor has mentioned in the comments , after expanding the code block ,the triangle disappears but if that specific area is clicked again then the code collapses and the triangle reappears

3. Inline Preview Template

Giving a option to preview the template in the same window is well thought UX move , keeping the continuity of the Google UI and not at all compromising with the testing of the template. It will surely improve the workflow of many template designers.


4. Format Template

If you are like me , trying to squish every whitespace out of your template to hyper-optimize for the smallest HTTP request size , then this might not be a feature for you. Jokes apart as you can see in the above image it can be a nightmare to edit a Template like that. A click of Format Template will indent your code in the most human readable form as seen in the image below . Just a word of caution though , for heavily modified template this might cause some problems , so Preview before saving any changes.

5. Find , Replace and Replace All functions

The Editor has its own Find , Replace and Replace All functions. This might seem a little off in the beginning as the Browsers Own Search will not work in the Editor but once you get used to it , it will come naturally. Especially the addition of Replace (CTRL+SHIFT+F) and Replace All (CTRL+SHIFT+R) , a must in code editors, will come really handy if you fiddling with the template a lot ( Especially with multiple similar items ) .

Here is a video demonstrating all the features (No sound but background music)

Conclusion

This will give many people a reason to shift their Blog on Blogger and make editing templates for current users much easier and more welcoming. This also fizzles out all the rumors going around after Google's Readers close-down about Blogger being next in the line to be closed down - HELL , if that was the case then these array of new developments would not be happening. Blogger is one of the oldest blogging platform and is here to stay for a long time. Also don't forget to check the official announcement

Update : This update appears to be rolled out for all the users and there seems to be no option to revert back to the old Template Editor

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox