How To Create And Share Two Columns Under Sidebar

Make 2 columns below the sidebar. In the default blogger template, usually a column sidebar that provided only one. The function of this sidebar column, of course we all have to know which to store a variety of gadgets or widgets, either in the form of images, additional applications, files, html, javascript and much more, so the web interface or the more crowded our blog. Now how to make additional sidebar column and divide it into two like the picture on the side?

By default the sidebar column provided is like this: 

When added two new sidebar, later like this:

The above example uses a template that has been modified width minima. To find out how to increase the width of the template can be read other blogs click here . Now we just go how to create and share a two-column sidebar.

1.  Sigin in draft blogger
2.  In the dashboard 
3.  Go to Layout 
4.  Click Edit HTML

1. The addition of CSS code

To add a column in the template, we need to make additional css code. Because of that we will create is a column for the sidebar, the code that needs to be added is the code below, copy this code:

. Singlesidebar {float: $ endSide; word-wrap: break-word; overflow: hidden}

Put or paste the below code

# Sidebar-wrapper {width: 320px; float: $ endSide; word-wrap: break-word; overflow: hidden}

Then Save or save the first.

2. Code ID for Dialing

After the css code we make, to call him, we must mendefenisikannya, namely by making ID callers. For that Copy the code below:

<div id='sidebar-wrapper'>
<div class='singlesidebar' style='width:100%'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</ B: section>
</ Div>

<div style='width:100%'> <div class='singlesidebar' style='width:50%; float:left;'>
<b:section class='sidebar' id='sidebar1' preferred='yes'/>
</ Div>

<div class='singlesidebar' style='width:50%;float:right;'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</ Div>
</ Div> style='clear:both'/>
</ Div>

Now we find the following code, if you have found this code delete replaced with code that we have a copy, then paste it here.

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

After that you save. Now let's see the results.

****Hopefully Helpful **** 

Do not just copy and paste, read rule to  here ! 
Post By Kang Salman
http://asksalman19.blogspot.com

Want to get extra income from blogs? Join and make your blog as a field of money for your wallet every month. Simply attach the banner alone! List => Click Here <= click! to harvest money $ like me. Free!

Get Updates Tips & Tricks blogging And Other Interesting Information Through Your Email Box.Free!