Google Blogger/ Blogspot and creating custom containers for adding a gadget widget to layout page

Question

I am new to the Blogger.com interface and customizing templates with this platform. Blogger is coded using XML which is am familiar but I can't figure out the correct coding in Blogger to place a customized container which is accessible within the Layout page of Blogger. I want to create it as user-friendly as possible.

Everything I have tried gives errors when I try to save the template. I just need a generalized push in the right direction.

Answer 1

Place this code below the "body" in the section where you want the container to be placed:

     <b:section class='type-of-widget-here-main-sidebar-etc' id='custom-id-for-styling' preferred='yes'/>

Then above the "/b:skin" place:

    #custom-id-for-styling  {
width: 100%;
margin-left: auto;
margin-right: auto;
padding:0px;
}

To place 2 containers next to each other:

    <b:section class='new-sidebar' id='magazine-left' showaddelement='yes'/>
<b:section class='new-sidebar' id='magazine-right' showaddelement='yes'/>
<div style='clear: both;'/>

CSS:

     #magazine-left {
width: 45%;
float: left;
}

#magazine-right {
width: 45%;
float: right;
}

To place 3 containers next to each:

    <b:section class='main' id='container-left' showaddelement='yes'/>
<b:section class='main' id='container-middle' showaddelement='yes'/>
<b:section class='main' id='container-right' showaddelement='yes'/>
<div style='clear: both;'/>

CSS:

    #container-left {
width: 31.3%;
float: left;
margin-left: auto;
margin-right: auto;
padding:0px;
}

#container-middle {
width: 31.3%;
float: left;
margin-left: auto;
margin-right: auto;
padding:0px;
left:0px;
right:0px;
}

#container-right {
width: 31.3%;
float: right;
margin-left: auto;
margin-right: auto;
padding:0px;
}