Blogger layout, start to play with yours layout

To play with your layout :

1. Sign In to blogger.com
2. Choose layout at yours dashboard
   

Blogger Layout have four sections ( Page element, Fonts and colors, Edit HTML, and Pick New Template)

The page element section shown us the element that contained on your blog. There are three major part of page element structure. See picture below

• Header section (red area)
• Outer section (blue area), this section consist of “blog post” area and “Sidebar” area
• Footer section (green area)
  

Now go to “edit HTML” Section

Note : Before to play with your layout, please backup first (click “download Full template”)

Now give big attention to HTML code at “edit template” section

Header Section

At the HTML code find these codes below. These codes referred to Header Section.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

The value above (660px) is refers to your header width, change it to 950 or whatever u like but it is wise do not more than 1000px (mostly user using 1024 x 768 screen resolution), save template and refresh your blog, happy… if not change it again until your happy. Like width value, u can change the value of margin and border too.

Outer Section

These codes referred to Outer Section

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

Formula : Outer = Padding + Main/Post + Padding + Sidebar + Padding

Footer Section

These codes refers to Footer Section

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Review :

1. Always backup before editing your template.
2. The width value of Header, Outer, and footer, are always have same value. So… If you change outer’s width you must change Header and Footer too.
3. Outer = Padding + Main/Post + Padding + Sidebar + Padding