Reduce Blogger Awesome Inc Template Inner Background Column Width

Since I started blogging, blogger awesome inc template has always been my favorite template, but I hate the fact that it has a 100% (percent) width for the content column thereby not being able to add inner background color like other template. But when I discovered that there is a way of deactivating the hundred percent width to your desirable width like the normal 960px, I haven't leave it even a bit or think of using any other blogger template

below is how I reduced the width from percentage to pixels 

Benefits

1. this is a way of giving you blog template a more professional look, now having the power to make the content column white or any other color and using a different color for your blogger outer background

2. you can reduce the width of the tab from 100 percent to your desirable pixel or percentage

3.  this also apply to the header and footer environment

Step 1

Log in to blogger 

navigate to the template page and click on the customize button 

at the customization environment you need to click on the "adjust width " tab at the left hand side before the advance tab and choose the width you wish to use then  save the template, after you might had choose the blogger awesome inc template from the template thumbnails

Step 2

Go back to the template page, where you have the edit html button

click the Edit Html button to show your blog template scripts and codes

Step 3

click inside the codes and press Ctrl F for the search box to appear at the top right hand corner of the page 

then find this code 

html body .content-outer {

change the both 100% width you found bellow the above code to your desirable pixel either the one you chose while adjusting the template width or something a bit bigger than that

example from this code bellow 

html body .content-outer {

  min-width: 0;

  max-width: 100%;

  width: 100%;

}

 To this one bellow

html body .content-outer {

  min-width: 0;

  max-width: 960px;

  width: 960px;

}

Now is time to change the content background color and stylize it 

 find this bellow code 

.content-inner {

than add your background color to look something like this

.content-inner {

background-color:white;

  padding: 0;

}

Here is where you need to add other customization like shadow, border etc with Css scripts to the content area or to the blog inner background

 Step 4

now you are done with this click on the preview tab and check out your blog new look, there after save it if you are OK with what you saw

Note

When you change the initial size which was 100% to something like 960px the template header, tab, content column and the footer will adjust automatically 

.............open the above images in a new tab to view in full.............

After doing this to your blog, you can as well add auto read more and strokes to the sidebar and beneath the post footer for a better look

thanks for reading, enjoy.