Create a Three Column Blogger Template

• Log In
  
• Layout
  
• Edit HTML
  
• Ctrl+F and search for: #header-wrapper {
  
• Under it, change the width from 660px to 940px.
  
• Next, press Ctrl+F and search for: #header .description {
  
• Under it, change the max-width from 660px to 940px.
  
• After that, press Ctrl+F and search for: #outer-wrapper {
  
• Under it, change the width from 660px to 960px.
  
• Now, press Ctrl+F and search for: #main-wrapper {
  
• Change the below width from 410px to 500px.
  
• Next, paste the following red text between the outer wrapper and the main wrapper so that it looks like this:
  
  #outer-wrapper {
  width: 940px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
  
  #left-sidebar-wrapper {
  width: 220px;
  float: $startSide;
  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 */
  }
  
  #main-wrapper {
  width: 500px;
  float: $startSide;
  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 */
  }
  
  
• After you've done that, Ctrl+F and search for: #footer {
  
• Change the below width from 660px to 940px.
  
• Now, press Ctrl+F and search for: <div id='main-wrapper'>
  
• Directly above it, paste the following code:
  
  <div id='left-sidebar-wrapper'>
  <b:section class='sidebar' id='left-sidebar' preferred='yes'>
  <b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
  </b:section>
  </div>
  
  
• NOTE: YOU NOW HAVE A THREE COLUMN TEMPLATE. YOU CAN STOP HERE... OR YOU CAN CONTINUE TO MAKE YOUR COLUMNS NOT CRAMMED TOGETHER. MY ADVICE WOULD BE TO CONTINUE!
  
  
• Finally, in order to to make your columns not crammed together, Ctrl+F and search for : #left-sidebar-wrapper {
  
• Under it, change your code to match the following new code (changes are in red):
  
  #left-sidebar-wrapper {
  width: 185px;
  margin-right: 10px;
  margin-left: 5px;
  float: $startSide;
  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 */
  }
  
  #main-wrapper {
  width: 500px;
  margin-right: 15px;
  margin-left: 15px;
  float: $startSide;
  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 {
  width: 185px;
  margin-right: 5px;
  margin-left: 10px;
  float: $endSide;
  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 */
  }
  
  
• Save Template