Add new column on new blogger template

Blogger template with 1 area widget make us difficult to arrange widget with large amounts, surely if we put too many widget in the area and make our blog a long downward. This will make the blog look not professional. but we can still add a new widget area in a few blogger template. maybe a tutorial that I give will be different on every blog template.

First you look at following code: Outer-Wrapper or /* Outer-Wrapper

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: right;
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 */
}

Outer-Wrapper is a container for storing main-wrapper and sidebar-wrapper. So if we want to add a new column or in other words a new sidebar, then the first step is to add value to the width of the Outer-wrapper itself.

Now how do I add a new column? The first thing to consider is what is the width of a new column which we want to create. as an example is 180 pixels, so automatically we have to change the width of the Outer-wrapper in advance, so that roughly the outer-wrapper width to be: 410 pixels + 220 pixels + 180 pixels + 20 pixels = 830 pixels, though there is little space, then we add 10 pixels so that the value to 840 pixels. To add a new sidebar code, I give an example like this:

#newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

So when added code, it will be like this:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: right;
padding-left:10px; /* This additional only, so it appears there was a distance space*/
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 */
}
#Newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

It is the first step that we do. The second step is we have to make code that is placed on the body. id code for the new sidebar is like this:

<div id='Newsidebar-wrapper'>
<b:section class='sidebar' id=New'sidebar' preferred='yes'/>
</div>

When combined, save the code in the sidebar under the original sidebar code, the code maybe like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='Newsidebar-wrapper'>
<b:section class='sidebar' id='Newsidebar' preferred='yes'/>
</div>

New column has been finished, but you have to change the width value of the header and footer your blog to be equal with your sidebar width. as examples of the width side bar that we created earlier is 840 px, then we will change the width value of the header and footer to be 840 px or 960 px.

so you're not dizzy, don't check the box Expand Widget Templates.

Find the code below:

#header-wrapper {
width:660px;                                 > change it to " 840px "
margin:0 auto 10px;
border:1px solid $bordercolor;
}

------------------------------------------------------------------

#footer {
width:660px;                                          > change it to " 840px "
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Popular Incoming search terms:

No related posts.