Blogger Trick: Set the Blog Width

Many of the good templates in the internet ready for your blog. But for some people feel this is not special. Special is that we create and modified by your own. Results will also be very satisfying because we get a template like what we want. Where to begin? I suggest to you to begin to set the blog width of the view that its header wrapper, outer wrapper, main wrapper, sidebar wrapper and footer. Not too difficult to do it. With little change to the code number, you have to do it successfully. You ready to get started now? Please follow a few steps below:

Note: This example is using Minima Default template by Blogger

 

1. Login to your Blogger Account

 

2. Go to Layout Tab

 

3. Click Edit Html

 

4. Download Full Template! Important to back up your data.

 

5. To set Width of Header, find this code:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Change the red with your want. Example:

#header-wrapper {

width:990px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

 

6. To set Width of Outer, find this code:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Change the red with your want. Example:

#outer-wrapper {

width: 990px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

 

7. To set Width of Main, find this code:

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

}

Change the red with your want. Example:

#main-wrapper {

width: 650px;

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

}

 

8. To set Width of Sidebar, find this code:

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

}

Change the red with your want. Example:

#sidebar-wrapper {

width: 300px;

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

}

 

8. To set Width of Footer, find this code:

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Change the red with your want. Example:

#footer {

width:990px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

 

9. Click PREVIEW

 

10. If you want to set again, don't click SAVE TEMPLATE!

 

11. If you have done, click SAVE TEMPLATE

 

12. If you want to back to your last template, just upload back up template that your download with Download Full Template.

 

Next post I will tell you about next trick to modified your blog template to be great! Good Luck!