How to make a 3 Column Denim Blog from 2 column

You can change your 2 Column 'Stretch Denim Light'
into a 3 Column one, without losing any widget!

(Note:

• First of all you must save your old HTML code as a separate notepad file in your computer, so that you would be able to revert it back to old template, in case of any mistake during doing new changes in it.
• Secondly, be careful during saving the change and never click on 'yes', if you are asked something like, "Are you sure that you want to delete widgets!" )

1. Log in to your Blogger

2. Go in 'Layout'

3. Then click on 'Edit HTML'

4. Then check the box mentioning 'Expand Widget Templates'

5. Now Search these blue colour codes. And replace them with Red ones.
After doing that, then click the 'SAVE TEMPLATE' button.

1 Firstly Remove this with red code: #header { width:740px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; } #header { width:940px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; } Then, Remove this blue code with red code #content-wrapper { margin: 0 2%; padding: 0 0 15px; text-align: $startSide; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-$startSide: 1%; width: 64%; float: $startSide; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { margin-$endSide: 1%; width: 29%; float: $endSide; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #content-wrapper { width: 940px; margin: 0 auto; padding: 0 0 15px; text-align: $startSide; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-$startSide: 14px; width: 500px; float: $startSide; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { margin-$endSide: 14px; width: 192px; float: $startSide; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #left-sidebar-wrapper { margin-$endSide: 14px; width: 192px; float: $startSide; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word;/* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } Lastly, Remove this blue code with the red code <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='main-wrapper'> <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/> </b:section> </div> <div id='main-wrapper'>

Note: The above method is very helpful for saving the time. But if you want to learn this process logically with little more time, then please refer to this external link.