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!
