Thursday, March 17, 2011

How to divide blogger sidebar to two columns

How to divide your sidebar to two columns

1. Log in to your blogger account and Go to Design >> Edit HTML

2.  First of all download your full template.because if you make some wrong
    you can recover it.

3. Put checked marked in Expand Widget Templates

4. Find this code (similar to this code)
*Each template has a composition different code. So you need to consider is the value of 
  its width.This above codes width is 254px,so you have to divide it. (117px and 117px) 
  and change second  column margin.

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; 
overflow: hidden;    }

5. Replace Above code with this below code.

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; 
overflow: hidden;     
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word;
overflow: hidden;     
}

6. After find like this code.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>
* Important is find about code, what i mention in red color.

7. Paste below code after there </div> tag

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

8. Now you are done.Click preview and save the template and  Go to page element and see the result.

2 comments:

  1. I am unable find this code in my blog

    www.vmwarearena.com

    #sidebar-wrapper



    Please help

    ReplyDelete