Edit HTML In New Blogger Interface : Blogger In Draft

We are influencers and brand affiliates.  This post contains affiliate links, most which go to Amazon and are Geo-Affiliate links to nearest Amazon store.

Google’s Blogger or Blogspot team has designed a shiny new layout for every aspect of the blogger free blogging interface, which has been implemented on 6th June 2011. In addition to a more sophisticated look and feel, some settings and other features have been re-organized, to make it easier for new blogger users to find what they need more intuitively.


For example, instead of having tabs in the main dashboard for your own subscriptions, Blogger Buzz and Blogs of Note, all of these feeds have been added to the dashboard or blogger home page on the right hand side for easy navigation. The links to View, Edit and Publish all blogs have been shifted to the left side of the page, in order to conserve space.All those changes apart, something unexpected too has been done with the blogspot interface. The Edit HTML feature for editing the blog template code in an online editor has been removed entirely, and it has become a much more tedious process to edit the code manually.
Perhaps this was done to encourage use of the Template Designer feature, perhaps to discourage people from accidentally damaging the layout by removing an important piece of the code, or to discourage people from removing the attribution widget and navigation bar, popularly known as the NAVbar.


If you are using the Blogger in Draft version and are looking for the Online Edit HTML Feature for Blogger/Blogspot blogs, you can for the time being access it at the URL:

http://www.blogger.com/html?blogID=[YOUR BLOG’S ID]

If you don’t know your blog’s ID, just go to your Blog Dashboard Page for the particular blog, and copy the blog ID from that URL Address. The entire URL is like:

http://draft.blogger.com/blogger.g?blogID=[YOUR BLOG’S ID]#overview

So, just copy the Blog ID from there and paste it in the first URL Address to access the old Edit HTML Page. You might also want to bookmark the link to access it directly in the future.
If you want to stop using this workaround, I’ve also outlined an alternate method to Edit HTML code of your Blogger/Blogspot blog’s template below in detail.
  • Go to the Blogger/Blogspot dashboard  or home page and click on the “Dashboard” link of the blog whose template html code you want to edit, present in the left sidebar.
  • Now, once you are in the blog’s dashboard page, click on the template link in the left sidebar.
  • Once you are on the template page of the blog, scroll down to the bottom of the page in order to edit or change the blog template’s html code.
  • At the bottom of the blog’s template page, you can see two links, one to upload/download the blog’s html template code as an xml file, and another option to change or revert the blog’s template to one of the classic templates. Choose the first option and another menu will automatically appear.
  • Once you see the links to upload and download the HTML template as an xml file, click on the download  button to download the current template, and save it. Now make a copy of the original template file and save it inside another folder, to avoid changing the original template by creating a backup.
  • Once you have saved a copy of the original xml template file, open the file with a text editor like Notepad or Wordpad for Microsoft Windows, or say Emacs file editor for linux installations or an equivalent Mac application. Make the changes you need to make and save the new edited template xml file.
  • After saving the new template, upload it to the blogger server, by going to the webpage previously opened and clicking on the Browse and upload button below the download template button.
  • After uploading the new edited version of the template you can review the changes on the blog, and if necessary re-edit the template and upload it again, until you are satisfied with the final layout.
To avoid any rude shocks, make sure you save a copy of the template before you begin editing it, and preferably, make a copy of the edited template each time you make a change, so that you can go back to the previous versions and find out what went wrong in case there is a problem!
[easyazon_block asin=”1430230126″]

We are influencers and brand affiliates.  This post contains affiliate links, most which go to Amazon and are Geo-Affiliate links to nearest Amazon store.