23 April 2013

Blogger Introduced New Template HTML Editor

Blogger Template HTML Editor

Those who love to blog always prefer blogger as their blogging platform due to several reasons like first of all it's completely free and it do provide some gretest flexibility for their user.So if don't have enough money to buy a host they you can go for blogger as it is provided by google,so it's the most reliable and trustworthy also.Earlier many people started discussing that google is going to stop that free blogging platform and will close it very soon but suddenly google started updating this free blogging platform with some new features and make us feel relief that they is not going to shut it down.So,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 we bet you must like it.So here we'll discuss about this html template editor introduced by blogger.

 Must Read : Make Do-follow Blogger Comment System

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 Fetures of Template Editor

Previously blogger template editor was one of the headache for the webdeveloper as it was bland,shapeless html editor but this new html editor do have some awesome features.

  • 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:

After using Template Format Blogger Template HTML
Format Template Before

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.

 Must Read : Disable Anchor Text on Blogger Comment

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.

Articles You May Like

5 comments: Leave Your Comments

  1. First I saw this I was worried because I have to study it again. I'd like the old one, less work and fast post.

    1. Once you understand this perfectly it would be more easier than the previous HTML editor I guess :)

  2. I tweaked my template a few days ago so I noticed this new feature early on. :)

  3. very informative and helpful. :)