Upgrade Classic Template without the "UPGRADE YOUR TEMPLATE" button.

Authentic Blogger Statement :

"I would like to change my 'Template' to 'Layout' but on the tab 'Customize Design' I don't even see the button of 'Upgrade', what should I do? "

Recently have seen many such appeals in the Blogger Help Group so I decided to investigate. Apparently the Blogger Team is working on a fix. Till then you can try out what I discovered..............


Blogger blogs have either Classic Templates or Layouts with widgets/gadgets. Classic templates are retained by those who wish to have the Ye Olde Blogger look. Layouts are preferred by those who do not want to be bothered too much with code and want a click and drag graphical user interface.


Those who wish to switch between Template and Layout could do easily using the UPGRADE YOUR TEMPLATE button (See picture below)



Many bloggers have reported the abscence of this button and hence the inability to upgrade their blogs to layout templates.

THE FIX

1. First Backup your blog to be on the safe side. This can be done using the export-backup function or the old backup method.

2. Backup blog Template using select-all-copy-paste from your Template Code box (Template---->Edit Html tab) to a Notepad file and save it on your disk.

3. Find your BlogID Number : This is essential as it will be used in the next step. To find it login at Blogger.com and click New Post button on Dashboard under the title of the blog you want to upgrade to Layouts. The Create Post page will open with a blank Post Editor. Copy the content of the address bar. It will look something like this :

http://www.blogger.com/post-create.g?blogID=BIG_NUMBER

Copy the BIG_NUMBER at the end of the address/URL.

4. Login at Blogger.com if you are not already logged in and open a new tab in your browser. Copy the URL below and paste in the address bar :

http://www.blogger.com/customize-template-choose.g?blogID=BIG_NUMBER&templateName=Minima

Replace BIG_NUMBER with your BlogID Number you copied in Step 3 above. Hit Enter key on keyboard.

If you have followed all steps correctly the Select New Template tab will open. Select your template and click the "Save Template" button.





NOTE : This is not same as picking another Classic template for your blog. The URL for that is :

http://www.blogger.com/template-choose.g?blogID=BIG_NUMBER

The URL for picking a new Layout is :

http://www.blogger.com/choosetemplate?blogID=BIG_NUMBER


Enjoy!

Equal Height Columns Template for Blogger.

Blogger has many templates which you can pick by going to Pick New Template under the Layout tab. At present all templates are two column templates. These have a main posts column and a sidebar at the right or left for your Profile and Archives and other widgets you wish to add.


They can be easily modified to add a third column in three steps. These column are however of unequal height. The height of the column depends on it's content. If you add more content to the sidebar it increases in length and then you have to add more posts so that the Main Column has a matching height. Other templates are available with faux columns to give an impression of equal height.


Here is a template with equal height columns : See picture below :



The columns do not end at their content...........


You can download template here. To download the template right click on the above link and choose 'Save Target As' in Internet Explorer and 'Save Link As' in Firefox browsers. Save the XML template file to your PC.


To load the template :

1. Login at Blogger.com.

2. Click Layout link on Dashboard.

3. Page Elements tab will open.

4. Click Edit Html subtab of Layout tab.

5. Edit HTml tab will open.

6. First Backup your Template. Then backup you widgets. Then click Browse button.

7. Explorer window will open. Navigate to where you hae saved the XML template file and select it and click Open.

8. Click Upload button.

9. You may get warning that "Widgets are about to be deleted!". No need to worry since you have already backed them up in Step 6 above.

10. After new template has loaded sucessfully you can readd your widgets. You can also try the alternative method of loading a template without deleting widgets.

Fix the Page Elements Layout Editor No Scrollbar Problem.

The Page Elements subtab of Layout (previously - Template) tab is used to Add and Arrange Page Elements. Since 12 Feb 2008 there have been no scrollbars in it. This causes the Page Elements on wider templates to disappear below the right edge and bloggers cannot access the Edit button on them. See picture below :



This can be fixed by modifying the CSS part of the template for the wireframe layout editor..............


Follow these steps to modify the code :


1. Login at Blogger.com.


2. Blogger Dashboard page opens for successful login.


3. Click 'Layout' link under your blog title.


4 The Page Elements subtab of Layout tab will open.


5. Click 'Edit Html' subtab of Layout tab.


6. The Edit Html tab will open with the Template Code box.


7. Scroll down in the Template code box till this code : ]]></b:skin>


8. Copy this code :

body#layout #outer-wrapper {
width:760px;
margin-$startSide: 0px;
margin-$endSide: 0px;
}


9. Paste it in the Template Code box immediately above the ]]></b:skin> tag.


10. Save Template.


11. Switch to Page Elements subtab of Layout tab. You should now be able to see all your Page Elements :





Happy Blogging!

Add Myspace Layouts to Blogger Blogs.

If you have a Myspace site and want your Blogger blog to be customized with the same look you can easily put your Myspace Layout on top of your Blog Layout. See picture of Blogger blog with a Myspace Layout on it below :




This is for Blogger blogs with Layout Templates. Those blogs with Classic Template should first Upgrade to Layouts Template...............

LOAD THE MINIMA LAYOUT

The first step is to load the Minima Layout Template. This is because if your original Blogger Layout contains graphic images they will interfere with the Myspace Layouts which contain lots of graphics and prevent them from displaying properly.



To do this first BACKUP WIDGETS TEMPLATE DATA. When you change Layouts your original widgets are deleted and have to be added later after loading the new layout. You can also use this method to keep widgets and change Layouts Template.


Login at Blogger.com and click on Layout link on Dashboard. On Page Elements tab which opens click on 'Pick New Template' subtab of Template tab. Select the radio button for the Miima Template and click Save Template button at top.
The Minima Template is now loaded. Now add in the widgets code from the backup saved in the paragraph above. Paste the code in Html Page Elements.

LOAD MYSPACE LAYOUT

To choose a Myspace Layout just Google for it. Go to the sites returned in the search results and choose the Layout you like. Copy the code for the Myspace Layout which is provided below the thumbnail preview. If you already have a Myspace Layout copy the code from the About Me box after login to your Myspace site.



Login at Blogger.com and click 'Layout' link on Dashboard. On the Page Elements tab click on the 'Add Page Elements' link in the top of the left sidebar. In the popup window choose Html/Javascript Page Element. In the contents window paste the whole code which you had copied of the Myspace Layout. DO NOT ADD A TITLE. Save.

FINE TUNING LAYOUT

To fine tune the Layout switch to the Fonts and Colors subtab of Template tab. The Minima Template has dark fonts which you may need to make lighter if the Myspace Layout is dark. You can do this on this tab. Also you can adjust the background color so that it blends into the Myspace Layout. After previewing and making changes save them.




View Blog. Enjoy your Blogger blog with the Myspace Layout!!

Keep Widgets AND Change Layout Template.

How can I change the Layout template of my blog and keep my widgets? This is one question which occurs frequently to any blogger. As Blogger does not offer any three column templates at present or a template with large amount of customization, many are forced to load layouts from third parties.



Layout templates are different from Classic Templates which can be easily loaded without losing your widgets. If you want to change your Layout template you are forced to first backup widgets template data which otherwise would have been lost in the change. The other method is to change the template and then reload your widgets which takes time if you happen to have tons of widgets like mine. Here is a simpler method to keep widgets AND change the layout template..........

THE PROBLEM

Here is what happens when you get bored with the standard Blogspot templates :

1. You do a Google search for "XML Blogger Layout Template Free"

2. You find a site offering free Blogger Layouts.

3. You download the XML file to your PC.

4. You login at Blogger.com and click Layout link on Dashboard. Then you click on Edit Html subtab of Template tab.

5. Above the Template code box you click on Browse button to navigate to the XML template file on your PC. You select the file and click Open.

6. Then you click the Upload button to upload the selected file to Blogger.

WHAM! Blogger hits you with this warning message :

Widgets are about to be deleted :

Please confirm that the following
widgets should be deleted. All the widgets' configuration data will be lost.

Image1
LinkList1
Label1
Profile1

See picture below :



If you click the 'Confirm and Save' button the widgets will be lost unless you had them backed up. If you click the Cancel button the new layout template will not load.

So you land up between the devil and the deep blue sea and the process is aborted.

THE SOLUTION

1. IDENTIFY YOUR WIDGETS : First you have to identify your widgets code. In the Blogger Layout templates each Page Element is executed by widget code in the template. To see the widget code login at Blogger.com and click on Layout link on the Dashboard. Then click on Edit Html subtab of Template tab. DO NOT CLICK THE EXPAND WIDGETS TEMPLATE check box! Scroll down in Template code box :



The code for the widgets is in red. Each page element is represented by a single line of code in the unexpanded template like this :

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

2. OPEN THE NEW LAYOUT TEMPLATE : Open the downloaded layout template (XML) file in Notepad. Identify the NON_WIDGET portion in the file. This is shown in black in the example Minima template file above.



3. COPY_PASTE THE NON_WIDGET CODE : Carefully select the NON-WIDGET code from the top of the template to the first widget code line in the new Layout template. Paste it instead of the same code in your Template box from the top of your template to the beginning of the first widget code line. Repeat the process for the rest of the NON-WIDGET code between the widgets and below the last widget code line in your template.

If you have done this carefully you will have replaced the whole template AROUND your widgets while keeping them intact.



4. PREVIEW BEFORE SAVING : The last step is to click the Preview button below the Template Code box. If you have done everything correctly your blog will open in a new window with the new layout template. Otherwise it will give you an error message. This is the advantage of Preview as it does not save the errors, if any, and gives you the opportunity of correcting them.

Interchanging Templates and Layouts in Blogger.

The advent of the new version of Blogger introduced the term Layout instead of Template for the new blogs. If you had started a blog in the old Blogger then you had a template. The new version of Blogger migrated your blog while retaining the old template. You then had the option to upgrade to the new layouts or keep to the old template.


The new Layouts are responsible for the new features in Blogger and since they require dynamic publishing cannot be used on ftp blogs. Old timers prefer to stay with what they know best and can edit easily like the old HTML templates. Newbies on the other hand love the Labels and new Archives features of the Layouts which enable them to categorize posts easily. However those wishing to interchange easily between Templates and Layouts are stumped. Here are some diagrams to help these Blogger users..............



If you start a new blog now you automatically get a new Layout for your blog. Layout is a term used to refer to the Graphical User Interface Blogger has introduced to enable bloggers to edit the template using click and drag rather than making changes to the XHTML code of the template. Here is a Web definition for "Layouts" :

Put visual elements into a pleasing and readable arrangement.

To access this login to your Blogger dashboard and click on Layout link next to your blog name. This will open the Page Elements subtab of Template tab where you can see all the sections of your blog and can drag and drop widgets to wherever you want. You can also add other widgets to any section of your blog from this page.


However there are some who wish to use Classic Blogger (HTML) templates. These people have to first revert to classic template in their blog and then load the classic template they wish to use. To do this login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. Scroll down to end of this page below the template box. There you will see a "Revert to Classic Template" link. Click that link and your blog will revert to classic template. See picture below
:

Follow the instruction on the left to revert to classic template. If you wish you can download this diagram and use it as a flash card to remind you of the method. Just right click the picture and choose 'Save Image as' to save it to your disk.



If you attempt to paste a HTML template into the new Blogger layout you will get an error message :

Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

Error messages in Blogger Templates explains the error messages and their correction.

UPGRADE TO LAYOUTS

Those people who wish to take advantage of new Blogger features like Labels should upgrade from classic template. To do this login to Dashboard and click on Template for your blog. Then click on Customize Design subtab. This page contains the Upgrade link to upgrade blog to Layouts. See picture below :


Follow the route on the right to upgrade to layout. You can steal the above graphic to keep as a reference.



Remember the two : HTML templates and XHTML/XML layouts are incompatible with each other and do not try and paste one into another.

Template or Layout Which is Better?

There are many HTML templates for Classic Blogger on the Internet which the newbie blogger comes across while searching for new templates.


Unfortunately these are incompatible with the new Blogger layout templates and will give error when pasted in the template box.


This causes much confusion even for experienced bloggers who are used to switching their blog templates in the blink of an eye. Hence here are some tips and tricks to know the difference between templates and layouts and the pros and cons of choosing either..........

The new Blogger debuted with the layout templates which were designed to introduce dynamic publishing and Labels. These layout templates are in XHTML/XML which is different and less forgiving then HTML. If you have started blogging in the old blogger you are used to Classic templates in HTML. After migrating to the New Blogger you had the choice to upgrade to the new layouts template.

ADVANTAGES OF LAYOUTS :

1. No need for republishing. Everything published immediately.

2. Labels can be used to categorize your posts according to keywords.

3. Increased traffic due to use of Labels.

4. One click access to editing widgets.

5. WYSIWYG (GUI) layout interface to arrange/edit your widgets on the PAGE ELEMENTS subtab of Template tab.

6. One click access to Layout/Page element tab from Dashboard.

7. Navigation Links at the bottom of each post.

8. Subscribe to Posts Atom (feeds) link at the bottom.

9. Way of the future as the Web gravitates to XHTML/XML and widgets.

DISADVANTAGES OF LAYOUTS :

1. Learning Curve to master XHTML/XML.

2. XHTML/XML more strict and spews out more errors than HTML.

3. Data separate from template code.

4. Widgets data not transferred along with widgets code when loading a new layout. After loading a new layout you have to enter widgets content separately.

5. At present not many XHTML/XML layouts are available free but many developers are coming out with new designs. Till then hack into your own layout to customize it.

6. No Previous Posts section. All posts in the Archives widget. Previous Posts section in sidebar can be added as a hack.

7. Many Javascript codes do not work here unless they are XHTML valid.

8. The expanded widget templates code is voluminous and difficult to navigate. This makes it more difficult to add a hack.

9. Difficult to add Adsense code within a post.

10. Many do not like/understand the Subscribe to Posts Atom link at the bottom.

11. Customizing each widget is more difficult. Though there is a Fonts and Colors tab it does not allow you to change colors of everything.

Only those variables described in the 'Variable Declarations' section at the top of the template can be changed. You can manually add more customization but that requires more knowledge of CSS and variables.

12. Cannot be edited in WYSIWYG web editors as it is in XHTML/XML.

13. Cannot be used on ftp blogs as they need to be hosted on Blogger servers.

ADVANTAGES OF HTML TEMPLATES :

1. Easier to learn.

2. Easier to change with less errors.

3. Data and template code loads in combination on loading a new template.

4. No need to backup widgets data separately.

5. Many ready made templates available on the Internet.

6. Previous Posts section present in the sidebar.

7. Javascript codes for adding the blings to your blog still work.

8. Adding a template hack is simpler.

9. Easier to add Adsense code within a post.

10. Customizing colors more simpler.

11. Can be edited in WYSIWYG web editors even by those having rudimentary HTML knowhow.

DISADVANTAGES OF HTML TEMPLATES :

1. Label links need to be added manually to sidebar like other links.

2. Labels below posts are present but cannot be customized.

3. Likely to be phased out in the future but not very soon.

4. Navigation links to Previous Post, Next post and Home have to be added via a hack.

5. Feed links have to be configured manually.

6. Cannot be ported to a Layout without a big headache. You have to load a similar looking layout and then hack it to resemble your old template.

HOW TO IDENTIFY YOUR TEMPLATE/LAYOUT?

If you create a new blog now it will have the layout template as default. You can know it is the Layout template when you load your blog in a browser and it shows :

1. An Archive widget in the sidebar with drop down arrows.

2. No Previous Posts section in sidebar.

3. Navigation links below the post on post pages.

4. Subscribe to Posts Atom link below the posts.

5. If you are logged in to Blogger you will see your email address in the Navbar at the top and the spanner-screwdriver quickedit icons at the corner of widgets. You will not see the address and editing icons when viewing other people's blogs.

6. When you go to Template----->Edit Html and look at the template code you will see tag at the top in a Layout template and <style type="text/css"> tag in a Classic HTML template. If you cannot see these tags just do a Select All in the Template box and then copy and paste the code in a Notepad file and use Ctrl+F to search for 'skin' or 'text/css'.


7. To check a template in another blog go to View------>Page Source when you are viewing the blog and then if you see the skin tag <style id='page-skin-1' type='text/css'>; then it is a Layout template. If you see <style type="text/css"> then it is a Classic HTML template.

8. After login to Blogger Dashboard if there is a 'Template' link next to your blog title then the blog has a Classic HTML template. If there is a 'Layout' link then it has a Layout template.

9. XHTML/XML layout template files usually have the .xml file extension. When you download your layout template using the Download Full Template link on the Template------>Edit Html page it is saved as a XML file on your PC. Though they can also be in a text file.

ERROR ON PASTING WRONG TEMPLATE :

If you paste a Classic HTML template into the template box of a blog with Layouts you will get this type of error :


We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

See Error Messages in Blogger Templates for more error messages, what they mean and how they can be corrected.


Now that we have seen the pros and cons of each layout or template which do you like the best? Just take the poll at the bottom of my right sidebar. Your vote is important! It may just help to increase the life of the Classic template!