Create Space Between Content Area And Sidebar In Blogger

In my previous tutorial about Creating shadow effect on content area and sidebar area , I had explained you about applying shadow effect in blogger. When you apply shadow effect on both content area and sidebar then shadow between sidebar and content area overlap on each other, which does not look good. To overcome this situation you can create space between sidebar and content area.

In this tutorial I will explain you about how to do
this, for doing this first you need to do is to set the width of content area and expand the template. When you expand the template sidebar area will automatically got gap from content area. Just follow the below steps and before doing this you can see Live Preview of it.

Set The Width Of Content Area

• Go to Blogger Dashboard >> Template >> Edit HTML.
• Click on Proceed but first backup your template.
• Now, Press Ctrl + F and Search for below code:

 <div class='column-center-inner'">  
      <b:section class='main' id='main' showaddelement='no'>  

• In your template Class name may vary, to get your templates class name you can do following things:

1. You open your blog into Firefox browser.
2. Now, put the cursor on content area and right click on it >> Inspect Element.
3. Now click this button  
4. Now roll over mouse cursor on the content area until you will cover the whole content area in a dotted border boundary. SEE THIS IMAGE

• Now, Add a new attribute to your DIV tag like this:

 <div class='column-center-inner' style="width: 500px">  

• Now save your template and see your blog. The space will be created there in content area and sidebar area.

Note:-

1.  Don't forget to change the class name in yellow with your templates respective class.
2. You can change the width of content area by changing width in Red.
3. You can expand the gap either by decreasing the content area width or by increasing the width of whole template in Template >> Customize >> Adjust Width.

If you have any question related to this tutorial then please post your comments below.

See Also: Shadow Effect For Content Area And Sidebar Area In Blogger