Practical approach to Hacking Beta Templates. ~ The Blog Doctor.

Practical approach to Hacking Beta Templates.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

You want your blog to stand out among the millions of blogs in the blogosphere then....

you will have to learn how to hack the beta blogger template. Classic Blogger had HTML templates which were easy to hack. You could load them into various WYSIWYG site builders and customize them easily. This is not the case with beta blogger.

Beta Blogger Templates are made of XML/XHTML. See What is XML-XHTML for a detailed description. There are five main parts to the template as described in Parts of the Template.

Since the templates are in XML you can use :

XML Notepad 2006
Microsoft XML Notepad
Stylus Studio XML Pro
XML Fox XML&XSD Editor

to edit the templates but they do not have any WYSIWYG capability.

Another approach would be to delete the XML declarations and add <style> tags like in old Blogger and then load them into any web editor. This also has its drawbacks since many web editors produce templates not acceptable by beta blogger.

The CSS sections in old blogger and beta Blogger are similar differing only in names. The corresponding names are shown in the table below. Some sections in beta blogger are new and do not have any corresponding parts in classic Blogger.

Classic BloggerBeta Blogger
headerheader section
mainmain section
sidebarsidebar section
footerfooter section

To see how these parts are arranged in beta blogger see Beta Blogger Template Structure.

Hence the best and most practical approach would be to use the facilities provided by Beta Blogger itself! To use this approach follow these steps :

  • Login to Dashboard and select Create a Blog.
  • Create a Test Blog with any name and add a posting.
  • Go to Pick New Template subtab under Template tab.
  • Pick the Template which most closely resembles the design you have in mind.
  • If you want no columns pick the Simple II Template.
  • If you want blog body to stretch to higher resolutions pick Stretch Denim or any other similar.
  • If you want body of blog in a central column pick the Minima.
  • Save Template.
  • Go to Edit Html subtab under Template tab.
  • FIRST use Download Full Template link to download it to your PC.
  • This saves a copy of the template in XML to your PC as FIRST BACKUP.
  • Next DO NOT put a check in the Expand Widgets Template box.
  • This prevents any accidental altering of the widget code.
  • Scroll down in Edit Template text box.
  • Look for the code you want to change.
  • Click on Preview at bottom to see the effect of the change.
  • If you do not like the effect right click inside Template box and select UNDO.
  • If you like the change Save Template Changes.
  • Immediately click on Download Full Template link at the top and save the template to your PC with the name FIRST BACKUP1.0 .
  • Repeat the above steps for any further changes.
  • Save backups to PC immediately after Saving Template Changes with names ending with 1.0, 1.1, 1.2, etc.
  • After making any major changes backup the template to PC with name ending with 2.0, 3.0, 4.0 etc.
  • This is so that you know which version of the template backup is the most recent.

Technorati Tags:, ,


Anonymous said...

Quite a thorough overview of the process to edit, thanks! I am about to modify my blog and don't want to mess things up too much. I like the table with blogger elements too.

Now its time play with some code!

Polyphemus' Ophthalmologist said...

I've never had a blog before, so this is nearly Greek to me. But I must start somewhere. Thanks.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.