how to change adjust width blogger

his tutorial is dedicated to my blogger fellows who don't know how to change the width of blog in Custom
blogger template. You can easily learn about how to change the width of different sections in Blogger. This tutorial is for those blogger who are stick with custom blogger template. If you want to adjust the width of blogger having Default blogger template then Must see this tutorial. Now increase or decrease the width of sidebar for new and awesome blogger widgets to get fit in it.
If you are using default blogger template then go for this post

You will Learn: 
How to change the width of Header wrapper
How to change the width of Main Wrapper
How to change the width of outer wrapper
How to change the width of sidebar
How to change the width of footer
How to change the width of Post section

Lets Begin:

The main subject of this post is related with the word "width" so we have to only mess with the width CSS property for the all codes given below

Note1:  These all "width" property are related with each other and all should be in specific ratio to each other.. For example
If the width of outer wrapper is 800px and the width of main-wrapper and sidebar-wrapper are 550px and  300px respectively then (If you know Mathematics then The below explanation will be easy) By the way don't worry the step below are simple :)

• Main-wrapper (550px) + Sidebar- Wrapper (300px) =  850px  which is greater then Outer wrapper (800px)

In the above case the sidebar may be pushed below by the main wrapper or they may overlap each other.

Conclusion:

• Mean the the width of Main-wrapper (550px) + Sidebar- Wrapper should be less then Outer wrapper

Example:

#header-wrapper {
width:770px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
--------------
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
}
--------------
#main-wrapper {
width: 550px;
}
---------------
#sidebar-wrapper {
width: 240px;
}
---------------
#footer {
width:770px;
{

How to change the width of Outer wrapper 

Outer wrapper hold the whole blog.

#outer-wrapper {
width: 650px;margin:0 auto;
padding:10px;
}

How to change the width of Header wrapper 

Header wrappers hold your header, Picture or logo and title etc.

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

 If the outer wrapper is 800px or 700px then the header wrapper should be less then outer wrapper
e.g:
if Outer wrapper is 800px
then the header wrapper should be 780px

 Changing the width of Main Wrapper

Main-wrapper exist of post area.

#main-wrapper {
width:420px;}

 Changing the width of Sidebar Wrapper

Sidebar wrapper exist of Widget, ads etc.

If the width of  the outer-wrapper is 800px
and the width of main-wrapper is 550px
then the width of the sidebar should be 240px;

because if the width of the main wrapper and sidebar wrapper becomes greater then 800px then the main wrapper will push the side bare downward

#sidebar-wrapper {
width: 210px;}

adjust the width of sidebar by changing the value of 210px;

 Changing the width of  footer

We recommend you to keep the width of footer and header the same. Further your choice.

#footer {
width:640px;
}

 Changing the width of  your post

Find the code below in template editor

.post {
or
#post {

.post {
background: transparent;
float: left;
width: 510px;font-family: 'Arimo', sans-serif;
}

and adjust its width.

Hope it solved your problem. And if you have any confusion then Please comment below to let me help you.