Have you seen blogger newly introduce template HTML editor?If not then you must.If you're a web developer and like to tweak templates then I bet you must like it.So here we'll discuss about this html template editor introduced by blogger.
New Blogger Template HTML Editor
There are two types of Editors on blogger one is for writing posts and another is for editing your template. Your site is build up with HTML that controls the appearance of your site. The templates can be customized through tweaking the coding present in 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.It is an open source and has a active development community around it,which is simply awesome.
New Features of This Template Editor
- Line Numbering:
While editing or tweaking in the editor you might face errors like “Error parsing XML, line 297, column 3” here the line number would assist you in finding the exact location of the error. Previously, there were no lines numbering functionality. This is precisely awesome feature for web developers who develop templates for their living.
- Error Highlighter:
The new HTML editor also has error highlighting function that highlights those tags which are causing the errors. For example, you forgot to close the script tags properly and tried to preview the template so it would highlight the <script> tag to let realize you that you forgot to close the tags properly.
- Syntax highlighter:
This new feature would help you in managing and writing new codes. With syntax highlighting, you would see a colorful coding which would help you to understand the infrastructure of your template. Different colored div class, Id, and etc would assist you in writing meaningful coding.
- Jump to the Widget :
I guess this is the most finest improvement made to the editor is the addition of “Jump to the widget” tool that directly assists you to find out the coding of a certain widget attached to your site. For example, locate the “PopularPosts1” widget quickly through the drop down menu located on this tool.
- Auto-Indentation:
White you are busy in writing the coding the auto-indention feature automatically arrange the structure of your code in a systematic manner, so there is no need to arrange the coding manually. Since, it will automatically indent your codes while you are writing, so it would allow you to write beautiful coding in a quickly and will save lots of your valueable time..
- Code Expanding and Folding:
This feature allows the user to selectively hide of show a section of a code that is not currently in use. In other words, this allows the user to cope those large sections of codes while viewing only those which are currently in use. Using an arrow you can show or hide the widget coding. For more details you may take a look on the following screenshot.
- Template Preview:
Giving a option to preview the template in the same window is certainly a well improvement of this new HTML editor It will surely improve the workflow of many blogger template designers.
- Template Formatting:
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.
That's it. With a bit of effort, we can easily familiarize with this new HTML editor.For more info, check out this post on the Blogger Buzz blog, where Google software engineers +Samantha Schaffer and +Renee Kwang explained the steps of using the new Blogspot HTML editor.
Post a Comment