1 ADD NEW SIDEBAR TO BLOGGER TEMPLATE

You might have noticed (if this is not your first visit) in my previous post, a demo and direct download link of Blogger's most popular "Minima Template". Not only this, you will find instructions and several other links that directs you to tutorial page on adding features to the same template. If you are interested in knowing more on how I created this beautiful and very simple two column minima template into three column minima template than you can follow through the steps below. However, you can always download the three column minima template and use it for free any time by clicking the direct download link or download link above. For those visitors who want's to know more about this template customization, you may proceed reading the post on how to convert original bloggers two columns minima templates into three columns with ease. And lastly, before getting deep into the tutorial let me make you clear that the download link I have provided is to those category of bloggers who is not interested in 'know how'. Enjoy the release!

................................................................................................................

Important Step, Don't Ignore

................................................................................................................Make sure that you backup your blogs template before trying out any customization that requires direct modification of the HTML code of your template. If you don't know how to restore or backup your blogs template then I would suggest you to read how to download your blogs template?

Sign into bloggers dashboard, click on design link and after that Edit Html. Click on the expand widgets check box.

Note: Original template codes is in GREEN colour and later added code in RED colour.

................................................................................................................

Steps to Add New Sidebar(Old Interference) 

................................................................................................................

Step1. Log in to Blogger dashboard if not already logged in.
Step2. Now Navigate to Design > Edit HTML

................................................................................................................

Steps to Add New Sidebar(New Interference)

................................................................................................................
Step1. Log in to Blogger dashboard if not already logged in.
Step2. Now Navigate to click down arrow before View Blog Link
Step3.Select Edit Html and click on proceed.

"Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features.We recommend using the Template Designer first, where you can Add CSS under the Advanced section" 

................................................................................................................

Adding The First Set Of Codes

................................................................................................................

Scroll to the part where you see this:-

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

The original template codes defines only 3 wrappers, namely:-

#outer-wrapper – refers to the Entire Blog

#main-wrapper – refers to the Main Blog Posts

#sidebar-wrapper – refes to the Right sidebar

Now to add another sidebar to the original blogger 2column minima template you have to copy the part of the codes in red just above the below codes in red. Refer to final code result below.

#newsidebar-wrapper {
width: 150px;
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 */
}

Final code result: Your template should now read something like this:-

#sidebar-wrapper {

width: 220px;

float: $endSide;

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: 150px;

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 */

}

Save this first step before proceeding further.

................................................................................................................

Adding The Second Set Of Codes

................................................................................................................

Next, adjust the width settings of all the 3wrappers + #newsidebar-wrapper added just now and we also have to fix the left margin of the main wrapper but allow the newsidebar to float to the left, leaving the original sidebar on the right.

#outer-wrapper – refers to the entire blog: 750

#main-wrapper – refers to the main Blog Posts: 410

#sidebar-wrapper – refers to the right sidebar: 150

#newsidebar-wrapper – refers to the LEFT sidebar: 150

Final code result: Your template should now read something like this:-

#outer-wrapper {

width: 750px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

margin-left: 10px;

float: $startSide;

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: 150px;

float: $endSide;

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: 150px;

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 */

................................................................................................................

Adding The Third Set Of Codes

................................................................................................................
Scroll to the part where you see this:-

<div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Add this just above the above given code in green.

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Your template should now read something like this:-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

................................................................................................................

Adding The Fourth Set Of Codes

................................................................................................................

Change Width of Header and Footer

#header-wrapper – refers to the entire blog: 750

 #footer-wrapper – refers to the entire blog: 750

Scroll to the part where you see this:-

#header-wrapper {

  width:660px;

And Search This:

#footer {

  width:660px;

Change to This:

#header-wrapper {

  width:750px;

And

#footer {

  width:750px;