BlogSpot

How to Install Elements on Left Column in Blogger

The blogspot default templates most of them are right column, if you want the sidebar move to left,you should change the html codes.Very easy to change.Follow me.

move the blogger right sidebar to the left

1 login to your blogger, click Layout –> Edit HTML –> check the Expand Widget Templates

2 in the html codes ,find

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  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: 220px;
  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 */
}

 

the #main-wrapper  control the main content , and the  #sidebar-wrapper control  the sidebar. just change the float property, starside and endside.

The default blogger templates most of them are #sidebar-wrapper  float: $endSide;.

If you want to move the sidebar from right to left, just change the #main-wrapper  and  #sidebar-wrapper float property .

then, the #main-wrapper  float should be   float: $endSide;  and the #sidebar-wrapper  would be float: $startSide;

After your change: (blogger left column)

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px; 
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 */
  }

#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 */
}